<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta name="viewport"
          content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../Styles/base.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<p>用户来说非常容易发生这样的情况：用户选择了一项，滚动，然后看不见了，再选择第二个项， 因为不能再看到前面的项目，用户忘了现在己经取消了对第一个项目的选定。</p>

<p>另一个替代方法也不好：在选择算法中通过编程禁止标准列表控件的相互排斥行为，允许 用户愿意选多少项就单击多少项，并保证它们不会取消选定。现在似乎万无一失了（差不多）：
    用户一个接一个地选择，每个都保持选中状态。美中不足的是，没有与标准选择相区分的视觉 暗示。用户很有可能选择了某项，滚动屏幕到其他位置，发现一个更满意的项并选择它，他希 望第一个项一这个时候看不见 ^
    能够通过标准的相互排斥而自动取消选定。作为设计师的 你，需要决定是冒犯前半部分用户，还是冒犯后半部分用户？</p>

<p>当对象滚动出屏幕，多重选择需要更好更独特的习惯用法。正确做法是釆用不同于简单选 择的习惯用法，视觉上截然不同。但它究竟是怎样的呢？</p>

<p>碰巧，我们己经有另外一个标准的习惯用法来指示某些事物的选择 —— 复选框。复选框清 楚地表达了它们的目的和设置。和所有好的习惯用法一样，掌握起来极其容易。复选框也清晰
    地区分于任何相互排斥的提示。如果我们为列表控件的每个项添加一个复选框，用户不仅清楚 地看见哪些项已经选择，哪些项没有选择，而且可以清晰地看见项目之间没有相互排斥。这样 就一举两得了。这种采用了复选框的多项选择的方法称为做记号（
    earmarking), 图 21-16 就是 一个例子。</p>

<p><font size="2">5i Hide protected operating system files (Recommended) i j Launch folder winders m a separate process
    f~l Restore previous folder windows a* logon [✓] Show drive tetters</font> <font size="1">3</font> <font
        size="2">SN</font> <font size="1">JW</font> <font size="2">encrypted or compressed NTFS Wes in color @ Show
    pop-up descnption for folder and desktop items jvl Shew preview handlers in preview pane @ Show status bar</font>
    <font size="2">@ Use Sharing Wizard (Recommendecf) i When typing into Its! view 〇 Automaticalfy into fte Search Box
        ® Select the typed item in #ie view</font> <font size="2">图</font> 21-16 <font size="2">选择通常是一种相互排斥的操作。当为了提供多重选择而需要抛弃互斥的时候，一旦有些条目会被滚出屏幕
        夕卜，事情就会变得更加复杂起来。做记号解决了这个问题。在每个文本条目的旁边放一个复选框，通过它进行选择，并 标记出使用者的选择。复选框是一种明显的非互斥习惯用法，也是大家都非常熟悉的</font> GUI <font
            size="2">习惯用法。使用者马上就会理 解并掌握这种习惯用法。</font></p>

<p>从列表中拖放</p>

<p>在直接操作习惯用法中，列表控件可以当做工具板来使用。例如，如果列表是某个撰写报 告软件的一部分，你可以单击某个条目，将它拖动到报告上，增加一个代表该字段的栏。在通 常意义上，这不是选择，因为它完全是一种捕获（ captive)
    操作。毫无疑问，如果使用支持拖</p>

<p align="right" height="2em" width="0pt">499</p>

<p>About Face 4 :交互设计精髓</p>

<p>放的列表控件，许多应用将从中获益。</p>

<p>这种可拖动的项目，能帮助用户以他们期望的方式把条目收集成一个集合。有两个相邻列 表控件：一个显示可用项，另一个显示已选项，这是一种常见的图形用户界面习惯用法。在它
    们之间有一个按钮，有时是双向的一对按钮，允许选择项目并且从一个框转移到另一个框（图 21-17) 。如果这种习惯用法可以在左右两个框之间直接拖放条目，而不需要选择和功能调用的 中间步骤，那会更加令人满意。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p>Select Names: Global Address List <font size="2">如</font> .. <font size="2">一〜一</font></p>

<p>Search: Name only More columns Address Book</p>

<p align="right" height="0pt" width="0pt"><font size="1">Gc Global Adcfress List - noelleOcooper.com</font> <font
        size="2">，</font> <font size="1">Advanced Fif</font> 、d</p>

<p><font size="1">nt</font></p>

<p><br/>
    <br/>
    <br/>
    <br/></p>

<p><font size="2">品</font> <font size="1">Alan Cooper 415-267-3503 Ml Cooper Employees Amazebalis</font> <font size="2"><i>Sf*</i></font>
    <font size="1">Amgen</font> <font size="1">Animal Lovers</font> <font size="2"><i>^</i></font> <font size="1">ApplelD
        Augmcdix pTj BGI Archive ^BizDevTaam</font> <i>m</i></p>

<p><font size="1">^ 1 u</font> <font size="2">川</font> .， <font size="1">* i { _</font></p>

<p><br/>
    <br/></p>

<blockquote>
    <font size="1">T</font> <font size="2">〇</font> <font size="1">-&gt;</font> J 1
</blockquote>

<blockquote>
    <font size="1">Cc-&gt; |</font>
</blockquote>

<blockquote>
    <font size="2">Bcc</font> <font size="1">^</font> <i>ml</i> <font size="2">1 ,</font> 0K j I . Cancel
</blockquote>

<p>图21-17这个对话框来自Microsoft Outlook Express。用户可从上面的列表中把一个联系人拖动到To、Cc和Bcc列
    表中带有箭头的按钮，并没有将功能展示得很清晰。这是因为，联系人复制的目的地，位于联系人源头地的下方，而 不是箭头所示的相邻位置。此外.请注意.所有的列表域遗憾地使用了水平滚动条，还好拉动对话框的左下角可以扩展 它的大小。</p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" rowspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" rowspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" colspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" colspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" colspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" colspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>
</table>

<p><br/>
    <br/></p>

<p>列表排序</p>

<p>有时，用户希望将列表控件中的某个项目从一个位置换到另一个位置。实际上，用户希望 做到的事情很多，远远超过多数交互设计师的想象。</p>

<p>许多应用为重要的列表提供了自动排序的工具。例如 Windows 中的资源管理器允许按文件 名、文件类型、修改日期和文件大小进行排序。这样很好，但是如果能够按照对用户的重要性
    排序，不是更好吗？从算法方面来说，应用可以按照用户的使用频率进行排序，但那并不总是 对的。把最近使用的文件这个因素考虑进去，结果会更接近一些，但仍然不会完全正确（微软
    在一些应用中用这种方式处理字体的选择，就这个目的而言，它做得不错）。</p>

<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<p>除了整个目录的排序，为什么用户不能进行部分内容的排序呢？比如，将他们认为最重要 的文件置顶，或者单独对一部分内容进行排序（按字母顺序或者其他任何顺序）？例如，你可
    能希望对你所在部门的人员按照座位号降序排列。没有这样的自动功能，你不得不一直拖动， 直到正确为止。现在，这是一种定制类型，经验丰富的用户花了几个小时熟悉应用之后希望能 这么做。精细地排序需要花很多时间，而且应用必须记住每个会话（
    session) 的确切设置 —— 否则，重新排序的工作就可能白费。</p>

<p>在列表控件中，将条目从一个位置拖动到另一位置的功能很重要，但它要求实现自动滚屏 ( 参见第 18 章）。如果在列表中选择了某个条目，但你需要放置的位置处于当前视图之外，那么 你必须能够在不放下拖动对象的情况下滚动视图列表。</p>

<p>列表中的水平滚动</p>

<p>列表控件通常有一个垂直滚动条，用来向上或向下移动列表。它也可以设置水平滚动条。 这个特征允许开发人员轻松地把超长文件放进列表控件中，但它给用户带来了巨大的痛苦。</p>

<p>只有在大型表格中，我们才可以水平滚动文本，例如一些表单软件，因这些软件能锁定首 行和首列，为每列提供文本。当水平滚动文本列表时，文本显示的每一行前几个字都会看不见 , 这样使得没有一行文本具有可读性，文本的连续性彻底破坏了。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p><img align="baseline" alt="" height="70" src="../Images/Image00044.jpg" width="54"/></p>

<p>设计原则</p>

<p align="right" height="8pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    绝不要水平滚动文本</p>

<p><br/>
    <br/></p>

<p>如果发现在某种情况似乎需要水平滚动文本，那么赶快寻找替代解决方案。首先要问你自 己，列表中的文本为什么会这样长。能减少字数吗？是否可以将文本换至下一行来减少水平长
    度吗？用户能否为过长的文字选择别名吗？可否用图形条目取代？是否可以采用工具提示呢？ 还应该问自己是否有方法扩宽控件？是否可以重新安排窗口或对话框里的事物，在水平方向扩 展一些？</p>

<p>除了扩宽控件，还有两个解决办法：办法一：将文本换行，对它缩排，使其在视觉上与其 他条目不同；办法二 .• 列表中截断该文本，在工具提示（ ToolTip) 中显示完整文本。办法一意
    味着我们要增加列表的高度，而且每个条目的高度可能是不同的。办法二，如果不同文本条目 的头几个字是一样的就有问题了。但这两个办法都比水平滚动要好。</p>

<p>记住，我们讨论的只是文本。对于图形，一般而言水平滚动条或者水平滚动窗口无所谓。 但是，带有水平滚动条的文本列表，就像提供一台需要脚踏发电的计算机一样，这简直太愚蠢 了。</p>

<p align="right" height="2em" width="0pt">501</p>

<p>About Face 4 :交互设计精髓</p>

<p>在列表中输入数据</p>

<p>现代的列表和树形控件（本章稍后会讨论）都提供了现场编辑（ edit-in-place) 工具 。Windows Explorer 使用了这两种控件。你可以通过重新命名文件和目录来了解它们的编辑方式。要在 Mac OS 或
    Windows 95 中重新命名一个文件，可以在希望更改的名字上单击两次 —— 但不要太快（以 免错误地解释为双击打开当前对象）。然后你可以随心所欲地输入文件名。（在 Windows XP 中
    有一点小变化，在一些视图中你必须右击菜单，选择重命名才能进入重新命名模态——这是进 步吗？）其他环境中可编辑的项目在列表控件中显示时，也应该能编辑。</p>

<p>现场编辑在某些情况下可能会变得有点复杂，例如，给列表添加一个新的条目。多数设计 师采用其他习惯用法添加项目：单击一个按钮或选择某个菜单项，为列表添加新的空白条目，
    之后就可以在现场编辑它的名字。还可以通过双击现有条目之间的空白来创建一个新的空白条 目，或者说至少在列表的开始或末端有一个永久的开放空间，在上面有一个很容易被发现“单 击添加条目 ”
    的标签，那将是更明智的。实际上，解决这个问题的方法用的是组合框，将在下 面谈到。</p>

<p>下拉列表和弹出列表</p>

<p>下拉列表（drop-down list) ，有时被称为 “ 弹出列表 ” （pop-up list )，可以取代一系列的单</p>

<p>选按钮。这会让交互更加紧凑，用户以更紧凑的方式来从列表中单选一个条目（如图 12-13 所 示 ) 。单选完毕后，弹出列表便自动收起。通常来说，弹出列表，与菜单栏是不同的，前者专注
    在对条目做出选择，而后者专注于执行命令。不过，这两者有时会立即改变信息的显示状态， 例如，当它们被用做实时搜索筛选器的时候，或者被用于浏览网站中的网页的时候。</p>

<p>组合框</p>

<p>组合框 （Combo box) ，正如名字所示，它是一个列表框和编辑字段的组合（如图 21-18 所 示 ) 。它提供了一个确定的方法在列表控件中输入数据。和一般的列表框一样，组合框也有一个 下拉列表，非常节省屏幕空间。</p>

<p>组合框控件很鲜明地区分了文本输入部分与列表选择部分，减少了用户的困惑。对于单一 选择，组合框是非常好的控件。编辑字段可用来输入新的项，它也显示列表中的当前选择。当 前选择在编辑字段中显示时，用户可对它进行现场编辑。</p>

<p>因为组合框的编辑字段显示当前选择，所以组合框本质上是单选控件，没有多重选择的组 合框，单选隐含了互斥，这也是组合框为什么这么快就取代了由互斥选项组成的单选按钮的原
    因之一。而且，组合框的空间效率，以及动态增加项目的能力，是单选按钮不具备的。</p>

<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<p height="2em" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p>Cambria (Body) 12 » <font size="2">A* A'</font> .\a <font size="2">*</font></p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="116" src="../Images/Image00081.jpg"
                                                width="281"/></p>

<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Adobe Caston <font size="1"><i>Pro</i></font> Adobe Caslon Pro Bold</p>

<p><br/>
    <br/></p>

<blockquote>
    Adot&gt;c Ganmond Pro _
</blockquote>
<blockquote>
    <font size="1">Adobe</font> Gurmukhi <font size="1">^</font>
</blockquote>
<blockquote>
    Adobe Hebrew _
</blockquote>
<blockquote>
    Adob« M»akb Meibum
</blockquote>
<p><font size="2">图</font> 21-18 Word <font size="2">字体选择的下拉组合框，使用者可以在下拉列表中选择所需的字体，或者在文本字段中直接输入所需字</font></p>

<p><font size="2">体的名字。</font></p>

<p>当使用组合框的下拉变体时，控件显示当前的选择，而不是显示选项列表，以节省空间。 本质上它已经成为一种按需列表（ list-on-demand), 更像按需提供立即命令列表的菜单，组合 框是弹出列表控件。</p>

<p>组合框的屏幕利用效率很高，使得如此复杂的控件可以做一些不平常的事情：它能合理地 永久停留在应用主屏幕上，它甚至也能放在工具栏上。它是非常有效的控件，适合部署在独占
    姿态的应用中。在工具栏上使用组合框比在菜单上放置相同功能更有效，因为组合框显示当前 选择，不需要用户任何动作，如下拉菜单去了解当前状态。</p>

<p>如果在列表中可以实现拖放，那么在组合框中也可以实现。例如，能够打开一个组合框， 滚动到一个选项，然后拖动选项到一个正在创建的文档中，这是非常强大的习惯用法（鼠标经 过时显示拖柄可提供受范性 )
    。拖放功能应该是组合框的标准功能。</p>

<p>树形控件</p>

<p>树形控件（有时也成为 “ 树形视图 ” ）是表达层次关系数据的列表视图。它展现得如同 “ 树 ” 的分支，每个条目一个图标。条目可以展开或者折叠。开发人员比较喜欢这种控件，因为它和
    开发人员想象中的数据和功能模型相匹配，而且它也很容易开发。它也常用于文件系统导航， 并且在表示继承关系的层次信息时，效果非常好。</p>

<p>遗憾的是，层次树也是工具箱里最容易被错误使用的控件之一。它有时可能给用户带来很 大的麻烦，因为很多人按照层次数据结构来思考问题时，都会感到十分困难。有无数次，我们
    见过开发人员把非层次数据强行放在了树形控件中，并且他们还想当然地认为这样做会很“直</p>

<blockquote>
    503
</blockquote>
<p>观 ” 。有的时候，可能树形控件在于开发人员眼中的确很直观（其他人可能也会慢慢习惯），但 这里最大的问题是，树形关系作为一种严格的层次关系，它妨碍了使用者去思考和利用对象间
    的其他更有意义的关系，同时它也没能尊重真实世界中事物的复杂关系。</p>

<p>只有在具备非常自然的层次结构的时候，我们才可以使用树形视图（无论它多么吸引你）， 这样才有意义。开发人员一时兴起，武断地采用树形视图表现随意的对象，这在可用性方面会 造成很大的麻烦。</p>

<p><span id="filepos0002705225"></span></p>

<p>输入控件</p>

<p>输入控件 （entry control) 允许用户在应用中输入新的信息，或者设置一个值。</p>

<p>最基本的输入控件是文本编辑字段。和选择控件一样，输入控件向应用表达名词。由于组 合框中包含有一个编辑字段，一些组合框的变体也能作为输入控件。任何允许用户输入数字的 控件也是输入控件，如微调器（ spinner) 、标尺（
    gauges) 、滑块（ slider) 和旋钮（ knob )等都 属于此类。</p>

<p>有界输入控件和无界输入控件</p>

<p>任何能限制用户输入值大小的控件都是有界输入控件 （bounded entry control) 。例如，一个 滑块被设置成从 1 到 100, 它就是有界的。使用有界控件时，无论用户行为怎样，指定范围之
    外的数字是不能输入的。有界输入控件可避免用户输入无效的值。</p>

<p>相反，一个文本字段可以接受用户键入的任何数据，包括文字与数字。这便是无界输入控 件 （unbounded entry control) 的例子。在使用无界输入控件时，用户很容易会输入无效值。当
    然，应用在后台可以剔除它，但用户仍可以输入。</p>

<p>简单地说，有界控件应该用在任何需要有数值界限的地方。如果应用只需要 7 到 35 之间的 数值，而给用户提供一个可以接受从 -1000000 到 +1000000 间任何数值的控件，对用户没有什
    么好处。人们更希望这个控件是有边界的，其上限为 35 而下限为 7 ( 同样，清晰地告知用户这 些界限，也是非常有好处的）。用户会聪明地立刻理解和尊重这种限制。</p>

<p><img align="baseline" alt="" height="69" src="../Images/Image00153.jpg" width="55"/></p>

<p>我们指的是输入控件的质量，而不是数据本身，理解这一点非常重要。作为一个有界控件， 它需要向用户清晰、最好是可视化地传递可接受数据的边界。用户输入了，但马上被拒绝了， 这种控件不是有界控件，而是一种粗鲁的控件。</p>

<p>设计原则</p>

<p>有界输入要使用有界控件</p>

<p>504</p>

<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<p>软件所需的大多数值都是有界的，但许多应用允许数字字段无界输入。当用户无意识地输 入一个 17, 对于这个无辜的输入，我们 “ 奖赏 ” 一个错误对话框，告诉她 “ 你只能输入 4 到 8 之间的数值。 ”
    这是拙劣的用户界面设计。处理这种情况，较好的做法是采用有界控件，将输入 自动限制在 4, 5, 6, 7 或 8 。如果选项的有界集合由文本组成，而不是数字，则可运用某种类 型的有界滑块（有时称为轨道条（ tmckbar))
    、组合框或者列表框。</p>

<p>图 21-19 所示的是微软在屏幕显示设置对话框中使用的一个轨道条。它的工作原理类似滑 块或滚动条，不同之处在于它用四个离散位置代表不同的分辨率设置。当然，在这种场合下， 微软也可以随意用一个不可编辑的组合框（
    non-editable combobox) 来代替这个轨道条。实际上， 在很多情况下，这种滑块类的输入更为合理，因为它可以显示有效的输入范围。不过，这里采
    用了下拉菜单并不是太友好的方式，它将一些选项隐藏起来，而自己也没省多少屏幕空间，并 且需要一次单击才会显示轨道条。我们不清楚为什么微软要把滑块放到下拉菜单里。</p>

<table valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span> &nbsp;

            <p><font size="2">Resolution:</font></p>

            <p><font size="2">1400 x 1050 ▼</font></p><br/>
            <br/>

            <p><font size="2">Orientation:</font></p>

            <p align="right" height="0pt" width="0pt"><font size="2">卜</font></p>

            <p><font size="2">ligh</font></p>

            <blockquote>
                <font size="2">1920 x 1080 (recommended)</font>
            </blockquote>

            <p><font size="2">Connect to a projec</font></p><br/>
            <br/>

            <blockquote>
                <font size="2">1600 x 900</font>
            </blockquote>

            <p><font size="2">Make text and othe</font></p><br/>
            <br/>

            <p><font size="2">1 1400 x 1050</font></p>

            <p><font size="2">What display setting</font></p><br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>

            <blockquote>
                <font size="1">12_JX720</font>
            </blockquote>
            <br/>
            <br/>
            <br/>
            <br/>

            <p align="right" height="0pt" width="0pt"><font size="2">800 x 60C</font></p><br/>
            <br/>
            <br/>
            <br/>

            <p height="0pt" width="0pt"><font size="5">LOW</font></p><br/>
            <br/>
            <br/>
            <br/>
        </td>

        <td bgcolor="#FFF" colspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" colspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" colspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" colspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" colspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" colspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>
</table>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> 21-19 — <font size="2">个只让你输入有效值的有界控件。它不让你输入无效的值，在无效的位置，滑块会拒绝停留。此图显示的 是</font> Windows <font
        size="2">的屏幕分辨率设置对话框中的有界滑块控件。滑块（它在下拉菜单里，这让人费解）有四个离散的位置， 当你拖动滑块时，它旁边的图例告诉你所允许的分辨率值，以及它所推荐的分辨率。</font>
</blockquote>
<p>微调器</p>

<p>微调器（ spinners) 是常见的键盘或鼠标数字输入控件。如图 21-20 所示，微调器包含一个 小的编辑字段，附有两个半高的按钮。 i 〇 S 中，该控件被称为 “ 步进控件 ” （ stepper ),它有一
    个加号键和一个减号键，手指操作较更容易。</p>

<blockquote>
    505
</blockquote>
<p>&nbsp;</p>

<p>About Face 4 :交互设计精髓</p>

<p><font size="2">Page Setup,</font></p>

<blockquote>
    <font size="1">Margins | Paper | Layout</font>
</blockquote>

<p><font size="1">Margins</font></p>

<p><font size="1">lop:</font></p>

<p>Left:</p>

<p><font size="1">Gutter:</font></p>

<p height="0pt" width="0pt"><font size="5">：E</font></p>

<p><font size="1">Sight:</font></p>

<p><font size="1">1.51.</font></p>

<p><font size="1">1.75"</font></p>

<p>3</p>

<p>Iffl</p>

<p>i</p>

<p><font size="1">Landscape</font></p>

<p><font size="1">Pages Multiple pages:</font></p>

<blockquote>
    <font size="1">Apply to: Whole document</font> <font size="1"><u>丨▼</u></font> <font size="1">| Set Assault |</font>
</blockquote>

<p>][</p>

<p><font size="2">图</font> 21-20 <font size="2">微软</font> Word <font
        size="2">页面设置的对话框中使用了大量的微调器通过单击小箭头按钮，指定的数值就会一小步一小步</font></p>

<p><font size="2">地増加或者降低。如果用户希望一次做大幅度地改变或者输入一个精确的值，就可以使用编辑字段直接输入数字文本。</font></p>

<p><font size="2">控件的箭头部分有界，但编辑字段则没有。</font></p>

<p>微调器混淆了有界控件和无界控件之间的区别。使用任一小箭头按钮可以使用户以离散的 小步改变编辑窗口中的数值。每一步都是有界的 —— 数值不会超过应用设定的最上限，也不会
    低于应用设定的最下限。如果用户希望一次做大幅度的改变，或输入一个精确设定，可以单击 编辑窗口部分直接输入，就像在任何其他编辑字段中输入文本一样。遗憾的是，这个控件的编
    辑窗口部分是无界的，可以让用户自由输入，甚至是莫名其妙的垃圾。在图 21-20 所示的页面 设置对话框中，如果用户输入一个无效的值，该应用就会粗鲁地弹出一个错误对话框，解释上 限和下限（有的时候是这样的），并且还需要用户单击 0K
    按钮才能继续。</p>

<p>总体来说，微调器是一个优秀的习惯用法，可以在多数有界输入中取代普通的编辑字段。</p>

<p>刻度盘和滑块</p>

<p>刻度盘（ dial) 和滑块（ slider) 都是从机械时代直接借用过来的习惯用法，它们分别对应 着旋转控制钮和滑动控制杆。刻度盘非常节省空间，这两种方式都可以很好地提供设定的视觉 反馈（参见图 21-21 )。</p>

<p>506</p>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00040.jpg"/></p>

<p>图21-21 Ko「g公司出品的iPolysix是软件音乐合成器，大量地使用了刻度盘和滑块。这些都是很有效的界面元素，不</p>

<p>仅因为音乐人和制作人都很熟悉硬件的合成器，更为重要的是，因为它们使用者带来更加视觉化的参数设定和易于理解</p>

<p>的反馈，这比长长的、令人枯燥的数字列表要好得多。用户用手指在iPolysix的刻度盘上做弧形滑动，不用上下或左右</p>

<p>滑动，但实际上后者要更容易一些。</p>

<p><br/>
    <br/></p>

<p>如果设计不当，刻度盘将会很难操作。滑块常常是更好的选择，它们看上去就像是可以在 一个维度上移动的。由于它们具有紧凑的外形以及可视化的特点（而且和机械世界中的滑块是 一致的），被大量地用在音频软件中。</p>

<p>有的时候，开发人员强迫使用者用鼠标或手指来描绘圆弧，让鼠标或手指和刻度盘保持一 定距离，这样可以让旋转的角度更加细致。实际上，更为恰当操作刻度盘的方式应该是，让用
    户在两个维度上进行线性输入：点击（或轻拍）并向上或者向右，就会增加刻度盘上的数值； 向下或者向左就会减少数值。</p>

<p>刻度盘最适合专业的独占式应用，这样用户可以逐步熟练并适应它。另外，刻度盘相对较小 , 视觉上看起来比较美观，并且继承了它们机械祖先的外形，因此它们在音频软件中比较流行。</p>

<p>尽管滑块和刻度盘主要用于有界输入控件，它们有的时候也被用来（或者被错误地用来） 显示正在变化的数据。实际基于此，滚动条是更好的选择，它可以在一个视图中移动数据，轻
    易地显示出滚动中数据的数量级，滑块则无法做到这一点。不过，滑块在缩放交互中是最佳的</p>

<p align="right" height="10pt" width="0pt">507</p>

<p>About Face 4 :交互设计精涵</p>

<p>选择，比如调整地图的比例，或者是图片缩略图的大小。而对于直接操作的界面，最好还是交 给触屏上的双指张合手势。</p>

<p>栂指轮</p>

<p>栂指轮（ thumbwheels) 是一种刻度盘的变体，不过，它比刻度盘更容易使用。屏幕上的拇 指轮看上去就像鼠标上的滚动轮，行为也非常相似。它们普遍用在某些三维应用中，是一种紧
    凑的无界控件，适合平移和缩放。和滚动条不同，它不需要提供任何比例反馈，因为控件范围 是无限的。将这种控件映射为某个方向的无限制移动（像缩放)，或者在数据的移动中依赖它自 身才能返回，才是有意义的。</p>

<p>其他有界输入控件</p>

<p>目前，有一些实验性的用户界面突破了沿袭传统 GUI 控件和模拟机械部件的套路，建立一 些新型的交互方式，带来了更加视觉化和手势化的用法，比如在一个简单的二维框内点击一次
    定义一个数值（水平和垂直坐标决定着输入的数值），还有较为复杂的直接操作界面（参见图 21-22 中的例子 ) 。这些控件通常都是有界的，运用这些控件需要仔细考虑功能和手势之间的关
    系。这些控件一般都提供了视觉反馈。当使用者需要同时表达几个变量的时候，这些控件特别 有用，使用者也会愿意花费一些时间和精力来学习掌握这样的具有挑战性的控件。</p>

<p>无界输入：文本编辑控件</p>

<p>主要的无界输入控件是文本编辑控件 （text edit controls )。这种简单的控件允许用户键入任 何文本值，包括文字与数字。编辑字段通常是一小块地方，用户只能输入一两个单词的数据，
    但有时它们也可以是非常复杂的文本编辑器。使用鼠标或键盘，用户能够使用标准的连续选择 工具编辑里面的文本（正如在第 18 章中所讨论的）。</p>

<p>文本编辑控件，常用于数据库应用中的数据输入字段（包括连接数据库的网站），作为对话 框的选项输入字段，或者用于组合框的输入字段。在这些角色中，它们常用来完成有界输入控
    件的工作。但是如果所需的值是有限的，就不应该使用文本编辑控件。如果可接受的值是数值， 应该使用滑块等有界输入控件。如果可接受值列表由文本字符串组成，应该使用列表控件，这 样用户就不必打字了。</p>

<p>有时可接受值的集合是有限的，但是对于列表控件来说数量太大而不实际。如果一个应用 可能需要除了空格、标签和标点符号以外 30 个字母的字符串，那么即使文本编辑控件用途有限
    也可能无法避免地用上。但是如果只有这些限制，文本编辑控件可能会被设计成不接受非字母 字符及超过 30 个字符的输入。然而，这样带来了一个涉及验证（ validation )(参见接下来的讨 论）的交互问题。</p>

<p>第 21 章设计细节：控件和对话框</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00359.jpg"/></p>

<p>图21-22 Camel Audio出品的Alchemy Pro应用中.采用了好几种二维的有界输入控件。它们具有很好的视觉反馈， 可以在一个控件里调节多个参数.并支持更具表现力的用户界面这种有界的特性同时也向用户表明了使用情境：这些
    要输入的值必须在允许的范围内.就消除了用户输入非法数值的可能，没有哪个音乐人会喜欢错误对话框不断跳出干扰 他们的工作。</p>

<p><br/>
    <br/>
    <span id="filepos0002732786"></span></p>

<p>验证输入控件</p>

<p>尽管无界文本输入字段可接受任何形式的输入，但仍有必要为使用者构建一个 “ 有效的 ” 输入。一般通过在使用者输入完数据后，再加以验证来实现，如果数据无效则弹出错误消息。
    不过，这显然有可能会惹恼使用者，最终会降低他们的工作效率。虽然釆用有界输入，可以避 免无效数据的输入，但如果有效输入数字很大，例如信用卡号，验证也是很必要的。</p>

<p>验证控件 （validation control) 是内嵌验证和反馈功能的无界文本输入控件。这些验证控件 可以验证很多种格式的数据，例如日期、电话号码、邮政编码、社会保险号等。</p>

<p>虽然验证控件应用非常广泛，但仍有很多待改进的地方。验证控件的成功与否，关键在于 它是否给用户提供充分的反馈，是否尽可能地实时发现并处理错误，是否了解输入为什么是错 误的，并主动修复错误。</p>

<p align="right" height="9pt" width="0pt">509</p>

<p>About Face 4 :交互设计精髓</p>

<p>前面（第 17 章）提到过一个设计原则，要在视觉上区别行为不同的元素。所以，我们设计 验证控件时，也要考虑这一点，将验证控件在视觉上与非验证控件区分开来。无论是文本编辑
    字段使用的字体，不同的边界颜色，甚至是字段本身不同的背景颜色，都要有区分。</p>

<p>请注意，密码或其他的安全输入的控件，不能完全遵循可用性的设计原则（尤其对黑客或 垃圾信息发送者不可用才对）。这类输入控件有它们自己特有的设计考虑。</p>

<p>主动验证和被动验证</p>

<p>一些控件在用户输入过程中控件主动拒绝按键，这就是主动验证 （active validation )的例 子。例如，一个纯文本输入控件可能只接受字母字符，而拒绝数字输入。有些控件除了 0 到 9
    几个数字以外拒绝任何其他形式的输入。还有些控件实时地拒绝空格键、标志符、破折号和其 他标点符号。有的基于实时计算拒绝某些数字，除非它们通过了校验和这一算法。</p>

<p>当一个主动验证控件拒绝键入，它必须告知用户，而且还应该提醒用户拒绝的原因。如果 提供了解释，用户不会认为拒绝是任意的（也不会认为是键盘出了问题）,这样也有助于用户提 供应用程序所需的信息。</p>

<p>有时，可能直到用户完成输入才能确认数据的范围，而不是在每次键入数据的时候。只有 当控件失去输入焦点时，验证步骤才能发生，也就是说，当用户已经处理完一个字段而移到下
    一个字段时。如果用户关闭了对话框，或者控件不在对话框中时，调用了另一功能（例如在网 页中单击 “ 提交 ” 按钮）的情况下，验证步骤也必须发生。如果控件只有等到用户完成数据输 入才验证，这就是被动验证 （passive
    validation )。</p>

<p>例如，控件可以一直等待直到地址输入完毕，再向数据库询问输入的地址是否有效。每个 单词本身是有效的，但总体验证可能通不过。另外，尽管在某个特定时刻，应用知道地址是否
    有效，但在输入无效的情况下，用户仍然会继续输入其他条目，过会再返回。</p>

<p>处理这种情况的方法是在输入的同时使用递减计时器（ countdowntimer ),每次击键重新计 时。如果递减计时器变为零，就开始验证。计时器可以设置为约每半秒一周期。这样的设置结
    果是只要用户击键速度快于半秒，系统会响应很快。如果用户暂停超过半秒，应用程序理所当 然地认为用户已经停止思考，于是继续完成对当前输入的分析。</p>

<p>为了提供丰富的视觉反馈，可以改变输入字段的颜色，来反映对输入数据有效性的判断。 输入字段可以显示桃红色的阴影，直到应用程序判断数据有效，再变成白色或绿色。</p>

<p>暗不</p>

<p>针对验证控件的问题，另一个好的解决方法是暗示（ hints )。这种小小的弹出文本的外观和</p>

<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<p>行为与工具提示相似，它的功能是解释验证控件可接受数据的范围。另外，工具提示只有光标 在控件上停留了一会才出现，而暗示框只要控件检测出无效字符就会出现（但像工具提示一样 ,
    如果光标在输入字段停留超过一秒以上，它也可以在单侧显示）。如果用户向纯数字字段输入一 个非数字字符，应用会在犯规输入的位置附近显示一个暗示框，但不会遮盖或者模糊掉所输入 的数据。比如说，它暗示的文本为 “ 邮政编码只允许为数字，即
    0 〜 9” 。的确，用户输入被拒 绝了，但得到了应有尊重。暗示对被动验证也很有效，如图 21-23 所示。</p>

<table valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" valign="top">
            <span bgcolor="#FFFFFF">&nbsp;</span> &nbsp;

            <p align="center" height="0pt" width="0pt"><font size="2">Indentation .</font></p><br/>
            <br/>
            <br/>
            <br/>

            <p align="center" height="0pt" width="0pt"><font size="2">Left: f</font> <font size="1">〇</font> <font
                    size="2">- | g| Special:</font> By</p><br/>
            <br/>
            <br/>
            <br/>

            <p height="0pt" width="0pt"><font size="5">L</font></p>

            <blockquote>
                _10
            </blockquote>

            <p align="right" height="0pt" width="0pt"><font size="2">Right: |</font> <font size="1">〇</font> <font
                    size="2">1</font> <font size="1">工</font> <font size="2"><i>\</i></font> <font size="2">Q 0' to
                8*</font></p><br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>
</table>

<p><br/>
    <br/></p>

<p><font size="2">图</font> <font size="6">21-23</font> <font
        size="2">工具提示习惯用法如此有效，以致它可以被轻易地扩展到其他用途。我们一般用黄色来标示工具提示的悬浮</font></p>

<p><font size="2">标签，而用桃红色暗示无界编辑字段。这些暗示令我们不必再使用错误对话框。在本例中，如果用户的输入低于允许值，</font></p>

<p><font size="2">应用会用允许的最小值代替输入值，并非模态显示，以暗示解释替换的原因。用户可以输入一个新的值或者接受最小值，</font></p>

<p><font size="2">而无须被错误对话框打断。</font></p>

<p>处理出界数据</p>

<p>通常，编辑字段用于输入应用所需的数值，如字号磅数。用户可以随心所欲地输入 5.5 到 500 之间的任意数，输入字段将接受输入，并且将该值返回所属应用程序。如果用户输入的是 垃圾，控件必须做出某种决定。例如，在微软 Word 中输入
    “asdf” 作为字号磅数，应用会发起 一个错误对话框通知你：这是一个无效数值。然后又恢复到先前的字号磅数。错误对话框相当 愚蠢，但拒绝无意义的输入是应该的。但是如果你键入的是一个有效值， 9 的英文，又会怎么
    样呢？应用也会用同样简略的错误对话框拒绝它。如果相反，将控件编程实现为数字输入控件 , 可能会好一些。如果应用能将 9 的英文（ nine) 转换为 9, 这当然不会困扰用户（特别是在弹出 了暗示的情况下），但它说 9
    的英文不是有效值，当然是没有道理的。</p>

<p>单位和度量</p>

<p>如果文本编辑控件能够识别恰当的单位，那就太好了。例如，如果应用需要输入尺寸，用 户输入 5” 或 5in 或 5inChes, 控件不仅报告结果为 5, 还能报告单位是英寸。如果输入 5mm, 控件应该报告 5 毫米。
    SketchUp 是 Windows 和 Mac 平台上一流的建筑绘图应用，它支持这种 类型的反馈。类似的，如果财务分析软件设计得很好，那么它应该把 5m 识别成五百万。</p>

<p>比如说这个字段需要一个栏宽 （column width) 。用户可以输入数字，也可以同时输入数字 和某个度量单位。用户也可以允许输入默认（ default) 这个单词，应用程序将设置默认的栏宽。 用户也可以输入最适合 （best
    fit) 这一单词，应用会度量栏中的所有条目，根据环境选择最适</p>

<p align="right" height="2em" width="0pt">511</p>

<p>About Face 4 :交互设计精髓</p>

<p><img align="baseline" alt="" height="261" src="../Images/Image00364.jpg" width="201"/></p>

<p>合的栏宽。但这样做也存在一个问题，因为默认和最适合这些单词存在于用户的头脑中，而不 是在应用中。但这很容易解决，我们要做的就是通过组合框提供相同的功能。用户可以通过下 拉框找到标准宽度与单词（默认和最适合）。微软在 Word
    中使用了这种方法，如图 21-24 所示。</p>

<p><font size="2">图</font> 21-24 <font size="2">下拉组合框为有界输入字段提供了极好的工具。因为它包含输入值而不是数字。用户无须记住或输入例如页</font></p>

<p><font size="2">面宽度和整个页面这样的单词，在下拉列表中就可以选择它们。应用程序将这些单词解释为合适的数字，这样用起来才</font></p>

<p><font size="2">不会觉得别扭。</font></p>

<p>用户可以下拉组合框，看到如页面宽度和整个页面这样的项目，选择一个恰当的项。使用 这种习惯用法，用户头脑中的信息，以可见和可选的方式，被输入到应用程序中。</p>

<p>不要使用文本编辑控件输出</p>

<p>文本编辑控件，有着大家熟知的系统字体和视觉上清晰可见的空白框，给人以允许输入数 据的强烈印象。但是，有些软件开发人员常将文本编辑控件用做输出只读字段（ read-only output)
    。编辑控件当然可以作为输出字段，但把这种控件用于输出，有点戏弄用户的意思，用 户不会高兴。输出文本数据，使用文本显示控件 （text display control ),而不要使用文本编辑控
    件。例如，如果你想显示磁盘剩余空间，不要使用文本编辑字段，因为用户可能会因此联想到 如果输入一个更大的数值就可以获得更多剩余空间。至少这是控件的肢体语言告诉他的。</p>

<p><img align="baseline" alt="" height="69" src="../Images/Image00323.jpg" width="54"/></p>

<p>如果你继续用完全可编辑的文本控件输出可编辑信息，那么请在内部完善它，使它表里如 一地工作，否则就坚持用下一节描述的显示控件。</p>

<p>设计原则</p>

<p>仅供输出的文本用非编辑控件（显示控件）显示。</p>

<p><span id="filepos0002751463"></span></p>

<p>显示控件</p>

<p>显示控件 （display control) 用于显示和管理屏幕上信息的视觉展现。典型的例子包括滚动</p>

<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<p>条（ scrollbar) 和屏幕分割线 （screen splitters )。管理对象在屏幕上的视觉展现的控件和静态显 示只读信息的控件都属于这一类，包括标页面计数器（ paginator )、标尺（ ruler )、导向图
    (guidelines )、网格（ grid )、分组框控制项 （group box )，以及那些凹进和凸起的三维线条。在 本节中，与其详尽讨论所有这些控件，不如重点讨论几个问题较多的控件。</p>

<p>文本控件</p>

<p>最简单的显示控件可能是文本控件（ textcontrol), 它在屏幕的某个位置显示固定信息。它 的工作非常普通，只用来做其他控件的标签或者输出一些不能或不应该由用户改变的数据。</p>

<p>文本控件存在的唯一问题，是它们经常被用在了应该使用编辑控件的场合（或者相反）。多 数存储在计算机中的信息都可以由用户更改。为什么不允许用户更改它呢？输入值与输出值的
    机制为什么不同？在许多情况下，应用程序区分这两种机制是没有意义的。在几乎所有的情况 下，应用显示的值可以改变，它应该位于可编辑字段中，用户单击后可以直接更改它。特殊的 编辑模态几乎都是附加工作。</p>

<p>曾经有相当长的一段时间 ，Adobe Photoshop 在图像中创建格式化文本时，必须要打开一个 对话框，结果用户无法看到文本在图像中确切的模样，于是为了得到正确的图像，用户不得不 一次又一次地重复这个过程。好在 Adobe
    最终发现并解决了这个问题，让用户以所见即所得的 方式，直接在图像层编辑格式化文本，它本该如此。</p>

<p>滚动条</p>

<p>滚动条在现代 GUI 中扮演着重要的角色，满足了很多关键的需求 , 它让较小的矩形框内（比 如窗口和窗格）可以显示大量的数据。然而，很遗憾，它基本上也是很令人沮丧的——不仅难
    于操作，而且浪费像素。毫无疑问，滚动条的运用既缺乏检查，又过度了。作为显示控件，它 适合用于窗口内容和文本的导航器。</p>

<p>滚动条公认的优点是易于操作，而且能够清晰地显示在窗口中的当前位置。滚动条上的滑 块（ thumb) 是个可拖动的小框，指示着当前位置而且通常显示出可滚动区域的比例。</p>

<p>很多滚动条都很吝啬，给用户传递的信息太少。有一种迄今为止设计得最好的滚动条，用 可变大小滑块来动态显示当前可见区域占整个文档的百分比。</p>

<p>滚动条适用于几乎所有类型的内容。其中，用于文本页面的滚动条可以为我们显示出如下 内容：</p>

<p>• 总共有多少页。</p>

<p>• 当我们滚动时，显示页数（或者记录数、图形数）。</p>

<blockquote>
    513<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<blockquote>
    • 当我们滚动时，要显示每一个页面的缩略图。
</blockquote>
<p>另外，滚动条的功能太少，为了更好地管理文档中的导航，它应该为我们提供功能强大的 工具，让我们快速而容易地去我们想去的地方，比如：</p>

<blockquote>
    • 根据页数 / 章 / 节 / 关键词为我们提供向前跳读的按钮；
</blockquote>
<blockquote>
    • 为我们提供跳到文档开始和末尾的按钮；
</blockquote>
<blockquote>
    • 给我们设置可以快速返回的书签工具；
</blockquote>
<blockquote>
    • 带有注释的滚动条，可以在滚动条的背景上显示出被搜索词语的位置（滑块此时要变 成半透明的才行）。
</blockquote>
<blockquote>
    微软最近版本的 Word 中的滚动条才逐步开始使用这些功能中的一大部分。
</blockquote>
<p>除了缺乏与使用情境有关的信息这个问题之外，在 WIMP 操作系统中，滚动条有一个最大 的问题 —— 它要求用户高度精确地操作鼠标。你必须非常小心地定位光标，这将会分散你在滚
    动的数据上的注意力。一些滚动条在两端都同时设置上下箭头；这样对于可能超出大部分屏幕 的文本视图是有帮助的；但对于小一些的窗口，这种重复可能有损害，徒然增加了屏幕的混乱 度（关于这种习惯用法的更多讨论，请参见第 18 章)。</p>

<p>无处不在的滚动条很不幸地被误用了。最显著的缺点在于它无法用于在时间轴上的导航。 无论是科学还是迷信，我们都认为时间是没有真正意义上的开始和结束的（至少在人类的感知 上是这样的）。那么，拖动日历中的滚动条又有何意义呢？（参见图
    21-25 。）</p>

<p>现在，在移动平台，甚至在一些桌面应用中，滚动条都在需要滚动的时候才出现，这对于 移动平台尤其有意义。用户通常并不需要滚动，但通过手势进行滚动操作可以了解当前屏幕在 文档中所处的位置。</p>

<p>笔记本或台式机上，用户可以通过鼠标的滚轮（或苹果的电容触控鼠标）或触控板等可使 滚动条隐藏起来（如 OS X) 。但滚动条的主要意义在于指示出当前内容的位置，并不在于滚动
    本身。然而，滚动条被隐藏起来，会带来了一些可用性方面的问题，要加以处理：</p>

<blockquote>
    • 用户可能看不出窗格是可以滚动的。此时，我们可以用较为强烈的视觉暗示，来解决 这个问题，例如窗格边缘的东西半透明显示。
</blockquote>
<blockquote>
    • 滚动的精确控制更困难。如果滚动条不用时被隐藏起来，则想要一下子找到它的位置 也是有难度的，因为这个动作已经牵扯到了精确控制。所以，应用程序需要进行精确 控制时，最好还是不要将滚动条隐藏起来。
</blockquote>
<blockquote>
    • 屏幕较大时，我们完全可以将滚动条隐藏起来。用户可以移动鼠标靠近它，或滚动鼠 标滚轮去激活它。
</blockquote>
<p>514</p>

<p>第21章设计细节：控件和对话框</p>

<blockquote>
    <font size="1">CdMdar cum •</font>
</blockquote>
<p><font size="1">IQH MOMC SCMD/«CfM KXm</font> <font size="2"><i>YK9t</i></font> <font size="1">AIX3Ki</font> <font
        size="2">〇</font> <font size="1">f</font> ? ® • &lt;f X</p>

<blockquote>
    □ = <i>^ ^ m ^</i> 'r ^ ■
</blockquote>

<blockquote>
    <font size="1">… fW Nm C% _ _ NcMutr</font> <font size="2">卜</font> <font size="1">―Stout*</font> <font
        size="2">f〇</font>
</blockquote>

<p><br/>
    <br/></p>

<p align="center" height="0pt" width="0pt"><font size="2"><i>i A</i></font> <font size="1">* Jamwfy Febmafy2015 ^/4rf -*
    ^</font></p>

<p height="0pt" width="0pt"><font size="5">P</font></p>

<blockquote>
    <font size="1">a 19 ft M 1</font> <font size="2"><i>9</i></font> <font size="1">I</font> <font size="2"><i>SIMM</i></font>
    <font size="1">MCVtfMY VUISDkV WtDNGOAv THUBDAT RODAV</font>
</blockquote>

<p align="right" height="0pt" width="0pt"><font size="1">lin 19 19 2</font> <font size="2">〇</font> <font size="1">21 7)
    tt u a u i5 » p ** “</font> <font size="2"><i>13</i></font></p>

<blockquote>
    <font size="1">a »</font> <font size="2">籌</font> <font size="1">n » o</font> <font size="2">麯</font>
</blockquote>

<p align="center" height="0pt" width="0pt"><font size="2"><i>n m r&gt; n » m n</i></font> <font size="1">»*wy*l*</font>
</p>

<blockquote>
    <font size="1">MIMOIVWCIMMM K * 27 2t » i</font> <font size="2">〇</font> <font size="1">t t &gt; t 1 4 ?</font>
</blockquote>

<blockquote>
    <font size="1">• t U U II M ja il*</font> <font size="2"><i>a m n » n</i></font> <i>n 2% u n m ^ m</i> SAlUIDAv •
</blockquote>

<p height="0pt" width="0pt"><font size="5">H</font></p>

<blockquote>
    <font size="1">* ^ * 5 • 7 Frtl 2J456 « « to U ft/ u ^</font>
</blockquote>

<p><font size="1">J • MyOAendm</font></p>

<blockquote>
    <font size="2">：</font> <font size="1">^04</font> <font size="2">〇</font> <font size="1">Ktef</font> 7
</blockquote>

<p align="right" height="0pt" width="0pt"><font size="2"><i>:</i></font> <font size="2">；</font> <font size="1">A**KCalHidw
    8 9 10 H |2 U j Rooms 15</font> <font size="2">访</font> <font size="1">1« W »</font></p>

<blockquote>
    <font size="1">14</font>
</blockquote>

<blockquote>
    <font size="1">71</font>
</blockquote>

<p><font size="1"><i>一</i></font></p>

<blockquote>
    <font size="1">HomffolSlMM</font>
</blockquote>

<blockquote>
    <font size="1">LjtoMHMt</font>
</blockquote>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">Mail Calendar People Tasks</font> <font size="1">**•</font>
</blockquote>

<p>图21-25这个图中显示的是滚动条的局限性，它不适合为无限的时间轴进行导航。图中Outlook中的日历，使用者拖</p>

<p>动滚动条可以一直到达未来中的任何一年。这未免有些独断和局限。</p>

<p><br/>
    <br/></p>

<table align="center" valign="top">
    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>

        <td bgcolor="#FFF" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>

    <tr valign="top">
        <td bgcolor="#FFF" colspan="2" valign="top"><span bgcolor="#FFFFFF">&nbsp;&nbsp;</span></td>
    </tr>
</table>

<p><br/>
    <br/></p>

<p>滚动条有一 ' 些变体。其中最好的一种是文档导航器 （document navigator ),它用一个小缩略 图来表示整个文档空间，提供文档中某个部分的视图（参见图 21-26) 。很多图形编辑软件（比 如 Photoshop)
    都釆用了这种方式在文档内部缩放导航。这对于和时间有关的文档非常有用，比 如视频和音频文档。这种习惯用法的成功与否，在于是否能用视觉的方式有意义地展现文档的
    概貌，这很关键。由于这个原因，这种用法并不适合于较大的文本文档。如果是较大的文本文 档，则可以釆用提纲等结构式的表达方法来代替滚动条。微软 Word 软件中的 “ 文档结构图 ”
    功能就是这样的一个例子（尽管它的初衷很好，但是实用性有限，它仅仅提供了一级和二级标 题的视图）。</p>

<p>分割线</p>

<p>分割线（ splitter) 是将独占应用分为多个相关窗格的有用工具，每个窗格中的信息都可以 浏览、操作或者变换。可移动的分割线应该借助光标暗示显示它的受范性。尽管将所有分割线
    都设置为可移动的会很容易而且又吸引人，但你应该仔细琢磨哪些是能设置成可移动的。一般 来说，无论分割线如何移动，都不能导致窗格中的内容不可用。在窗格需要折叠的情况下，抽 屉可能是更好的习惯用法。</p>

<blockquote>
    515
</blockquote>
<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00343.jpg"/></p>

<p>图21-26 Ableton Live软件中有一个文档导航器的功能，在屏幕的上方，可以提供整首歌曲的视图黑色长方形表示</p>

<p>现在正处于编辑中的那段歌曲.在工作区中被放大了。该导航器不仅为可能产生混乱的情况提供了清晰的情境信息，同</p>

<p>时用户也可以拖动它来提供直接的导航操作，移动到歌曲的任何一段上。</p>

<p><br/>
    <br/></p>

<p>抽屉和拉动杆</p>

<p>抽屉（ drawer) 是在独占式应用中可以用一次动作打开或者关闭的窗格。配合分割线，用 户可以打开多个抽屉，抽屉的数量可由用户配置。抽屆常常通过单击抽屉临近的控件打开，该 控件通常是锁定按钮、图标按钮或者拉动杆（ lever),
    它们具有类似的行为，一般可以通过旋转 来指示打开或关闭两种状态。该控件必须始终可见。</p>

<p>抽屉用于存放不常用的控件和功能，但当它们投入使用后，就会和应用的主要工作区联合 起来。抽屉有一个好处，它不像对话框那样会遮住主要工作区。属性细节、可搜索的对象列表 或组件和历史都非常适合放入抽屉。</p>

<p>移动设备上，大量运用了带有拉动杆的抽屉，用户水平滑动就可打开和关闭它们。一级导 航窗格可以被塞进抽屉中，这是一种很成功的习惯用法。此外，抽屉中还可以放置各种各样的 功能页面（例如 Facebook 曾一度大量使用 “ 汉堡包 ”
    图标和抽屉，但后来又放弃了这两种用法)、 内容页面 ( 例如手机邮件应用上常用的内容排序列表） , 或对抽屉中条目内容进行交互的页面(例 如 iOS 上 Facebook 应用中的右侧的聊天抽屉）。</p>

<p>516</p>

<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<p><span id="filepos0002776869"></span></p>

<p><font size="6">对话框</font></p>

<p>对话框（ dialog) 是叠加在应用主窗口上的弹出式的窗口。对话框以对话的方式让使用者参 与进来，在对话中它给出消息或要求输入。当使用者完成消息的阅读或者做出选择后，可以取
    消或者接受该对话框。之后，这个对话框便消失了，把应用程序的主窗口交还给使用者。</p>

<blockquote>
    把主要的交互操作放在主窗 <font size="2">口内。</font>
</blockquote>
<p>今天，非模态的工具栏或 ribbon 控件成为了当今的界面主流，而包含大量模态对话框的界 面变成了非主流，后者当然是很糟糕的。如果用户被迫进了对话框迷宫，这种界面很难产生出 “ 流动的交互 ”
    。如果用户是厨师，应用程序是厨房，那么对话框就是食品存储室。食品储藏室 在这种场合下，肯定是配角。这个道理同样适用于对话框。对话框也是配角，虽然也推动着故
    事情节的发展，但不能担当主角，不是故事情节的主线。应用的主要操作和控制不应该存在于 对话框中，而应当放置在主窗口或主界面上。</p>

<p><span id="filepos0002778782"></span></p>

<p>合理运用对话框</p>

<p><img align="baseline" alt="" height="70" src="../Images/Image00157.jpg" width="54"/></p>

<p>有时候，我们需要把使用者从工作流中强制带出来，让他们集中注意力关注在某个特殊的 问题上。这个时候，对话框是最适合放置常规事务流程之外的功能或特性的地方：任何可能会
    让人困惑的、置人于危险之地的、或者很少使用的功能，放在对话框里可能都会比较合理。这 一点，对那些可能对应用状态产生立即改变或重大改变的行为，尤其适用。这些改变对用户的
    干扰和冲击很大，应该将它们与不熟悉它们的用户隔离。比如，对文档作大量的格式修改，应 该被认为是一种可能产生混乱的行为，这个时候，对话框可以有助于防止这个功能被意外调用， 在对话框中可以放一个大的友好的 “ 取消 ”
    按钮，并留出一定的空间放上积极的说明性信息， 告诉使用者这个控件的风险。该对话框还可以用图形化的方式，告诉使用者这个功能潜在的效 果，比如用缩略图把效果显示出来。当然，我们还可以为该操作提供坚实可靠的撤销（ Undo) 功能（参见第
    15 章）。</p>

<p>设计原则</p>

<p>对话框适用于放那些主交互流之外的功能。</p>

<p align="right" height="1em" width="0pt">对话框也非常适合集中与某个主题相关的信息，例如应用程序中一个对象的属性，类似一
    张发货单或者一名顾客。它也能收集与应用中某个功能相关的所有信息，例如打印报告。这样</p>

<blockquote>
    517
</blockquote>
<p>About Face 4 :交互设计精級</p>

<p>做带给用户的好处很明显：和该主题相关的所有信息和控件都放在一个地方，使用者无须在界 面上到处寻找，减少了导航浏览的附加工作。</p>

<blockquote>
    对话框非常适合用来整理关于单一主题或应用程序功能的信息。
</blockquote>
<p>和菜单类似，对于那些要在学习软件产品的用户，对话框可以成为他们学习的有效途径， 因为对话框可以提供更加详细、更加结构化的信息，通过在主应用窗口可直接访问的功能。然
    而，在现代的桌面应用中，可扩展的、非模态的控制窗格，或情境工具栏，在这方面比对话框 更加有效。</p>

<p>对话框主要服务于两类用户：对应用熟悉并频繁使用的用户，对话框被用来控制更高级或 者更危险的设置 • ，对应用不熟悉并偶尔使用的用户，通过对话框来学习基础知识。这种双重性
    质，意味着对话框必须是紧凑的、功能强大的、快速而流利的，并且在使用上清晰和具有自我 解释性。这两个目标看起来相互矛盾，但实际上它们是有益的互补。对话框快速而强大的性质 , 直接起到了自我解释的效能。</p>

<p><span id="filepos0002783398"></span></p>

<p>对话框的基本交互</p>

<p>大多数对话框都包含有信息文本、交互控件，以及有关的文本标签。尽管已经存在一些基 本惯例，但是这种可以灵活运用的习惯用法并没有僵化死板的规范。设计的时候要遵循优秀视 觉界面设计的实践原则，还要保证正确无误地使用 GUI
    控件，这很重要。特别要注意，对话框 应该展现出明显的视觉层次，按照主体的相似性进行视觉分组，还要按照阅读顺序惯例来布局 ( 比如西方文化中，一般来说是从左到右，从上到下）。有关对话框视觉界面设计的实践原则的 更多讨论，可以参见第
    17 章。</p>

<p>对话框一旦出现，就应当始终显示在最上面的视觉层。这样，调用它的使用者便可以很明 显地看到它。接下来的交互动作产生的另一个对话框或者应用，可以遮盖这个对话框，但应该 有明显的办法让最早出现的那个对话框返回到最上层。</p>

<p>每个对话框都必须有一个标题来标示它的用途。如果某个对话框是一个功能对话，那么这 个标题就应该包含这个功能的动作，一般来说是动词。</p>

<blockquote>
    於设计原则
</blockquote>
<blockquote>
    在功能对话框的标题中使用动词。
</blockquote>
<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<p><img align="baseline" alt="" height="68" src="../Images/Image00056.jpg" width="54"/></p>

<p>如果对话框是用来定义某个对象属性的，那么它的标题就应该包含该对象的名字或者描述。 Windows 的属性对话框就遵循了这个原则。当你调用一个名为 “ 备份 ” 的目录的属性对话框， 就会看到它的标题是 “ 备份属性 ”
    。类似的，如果对话框是关于选择的，那么我们可以在标题 中加入选择的部分内容，这样会帮助使用者了解目前的状况。</p>

<p>设计原则</p>

<p>在属性对话框的标题中使用对象的名字。</p>

<p>绝大多数对话框，至少提供一个终止命令 （terminating command) 控件，触发它会让对话 框关闭或者消失。多数对话框会提供至少两个按钮作为终止命令： OK 和 Cancel ( 即 “ 确定 ” 和 “ 取消 ”)
    ，另外在右上角的关闭按钮也是一个终止命令的习惯用法。</p>

<p>在技术上，对话框没有终止命令也是有可能的。一些对话框由应用程序单方面控制显示 和消失 —— 例如报告耗时功能的进度 —— 设计者在此省略了终止命令。因为多方面的原因，这 种设计很糟糕，我们后面会看到这种情况。</p>

<p>模态和非模态对话框</p>

<p>有两种类型的对话框；模态对话框和非模态对话框。模态对话框 （modal dialog boxes )是 目前为止最常见的类型，打开一个模态对话框后，它所属的应用程序不能继续进行，直到对话
    框关闭为止。模态对话框会停止当前所有工作的进度，单击该应用程序的其他任何窗口，用户 都只会听到粗鲁的 “ 嘟嘟 ” 声表示操作无效。在模态对话框的工作过程中，该应用上的所有控
    件和对象都会暂停工作。当然，打开模态对话框时，用户可以运行其他的应用程序，不过当用 户回到原来的应用程序，原来打开的对话框还在那等着。</p>

<p>总之，模态对话框是用户（和设计者）最容易理解的。模态对话框的操作非常清晰，对用 户说， “ 现在停下手里的活，来处理我吧。结束之后，就可以回去继续你正在做的事。”模态对
    话框的严格定义的行为意味着它很少被人误解，尽管有时被滥用。模态对话框也许太多，也许 显得拙劣和愚蠢，但它们的目的和使用范围对用户而言通常是很清晰的。</p>

<p>有些模态对话框是针对整个应用或整个文档进行操作的。有些模态对话框是针对当前的选 择进行操作的，在这种情况下，在使用者已经调出这个对话框后，不能改变当前的选择。这是 模态对话框与非模态对话框最重要的区别。</p>

<p align="right" height="6pt" width="0pt">由于模态对话框只停止它们所属的应用程序，可以把它们更确切地称为应用程序模态 (application modal) 。还有一种称为系统模态 （system
    modal) 的对话框，能使系统中的所有应</p>

<blockquote>
    519
</blockquote>
<p>用都停止。大多数情况下，应用程序都不应该有系统模态对话框。系统模态存在的唯一理由， 是报告那种真正影响整个系统或者真实世界灾难的发生（比如硬盘要烧掉了）。</p>

<p>和模态对话框相比，非模态对话框 （modeless dialog) 使用得较少。打开一个非模态对话框 后，可以不用打断父应用程序，无须停止进度，应用程序也不会冻结。主应用程序的多种工具、
    控件、菜单和工具栏仍保持活动，可以继续调用。尽管非模态对话框的规则比模态对话框的更 弱，也更让人费解，但它们也有终止命令。</p>

<p>非模态对话框是一个更难使用和理解的 “ 怪物 ” ，主要是因为它的操作范围不确定。表现 在当你调用它，它存在的同时，你可以重新回到主应用。这意味着，在仍可以看见非模态对
    话框的情况下，还可以改变选择。如果对话框作用于当前选择，你可以随心所欲地不断选择、 改变、选择、改变、选择和改变。例如，微软 Word 的查找和替换对话框允许你在文本中查找
    一个单词（它会自动选择），并进行编辑，然后再回到对话框，对话框在主文档编辑过程中仍 是打开的。</p>

<p>在某些情况下，也可以在主窗口和非模态对话框之间拖动对象。这种特性，使得它们作为 工具板或对象板会很有效。</p>

<p>区分模态对话框和非模态对话框</p>

<p><img align="baseline" alt="" height="69" src="../Images/Image00194.jpg" width="55"/></p>

<p>如果解决交互设计问题的时间和资源有限，那么我们推荐让非模态对话框更多地保留原有 特征，但要运用以下几个指导原则，将它们一致地应用到所有非模态对话框中：</p>

<p>区别对待模态对话框与非模态对话框。</p>

<p>第一，模态对话框一定要包含一个或多个终止命令，通常将终止命令放在较大的按钮上， 并置于对话框底部。</p>

<p><img align="baseline" alt="" height="68" src="../Images/Image00303.jpg" width="54"/></p>

<p>第二，非模态对话框一定不要使用终止命令按钮，而应该在窗口标题栏上使用 “ 关闭 ” 控件。</p>

<p>设计原则</p>

<p>不要在非模态对话框中使用终止命令按钮。</p>

<p>第三，不要在模态对话框的窗口标题栏上使用 “ 关闭 ” 控件。这样做的目的，是要在视觉 上区分模态和非模态对话框，另外 “ 关闭 ” 控件所代表的意义对用户来说是不清楚的（点击它 意味着 “ 取消 ” ，还是 “ 确认”)。</p>

<p>520</p>

<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<p>模态对话框的问题</p>

<p>在某些模态对话框的变体中，终止命令 “ 取消”变成了 “ 应用”，或者变成了 “ 关闭”，我 们要避免使用这些变体。这些动态变化，至少会给用户带来困惑而难于理解；更严重的是，可
    能会导致用户因为害怕而无法理解。这些文本标签不应该变化。如果用户没有选择有效的选项 而单击了 0K 按钮，对话框应该认为用户的意思是 “ 什么也不做，关闭对话框”，因为用户确实 也是这样做的。</p>

<blockquote>
    <font size="7">&nbsp; <sub>
        <small><font size="7"><font color="#000000">0</font></font></small>
    </sub></font>
</blockquote>
<blockquote>
    设计原则
</blockquote>
<blockquote>
    不要动态地改变终止命令按钮的标签。
</blockquote>
<p>模态对话框的认知力量在于严格一致的 “0K” 和 “Cancel” 按钮。在模态对话框中， “ 〇 K” 按钮意味着 “ 接受输入，关闭对话框”； “Cancel” 按钮意味着 “ 放弃输入，关闭对话框”。</p>

<p>非模态对话框的问题</p>

<p>大多数非模态对话框被实现得很笨拙，它们的行为很不一致，令人十分困惑。它们在视觉 上与模态对话框非常相似，但功能不同。非模态对话框很少建立行为规范，尤其是终止命令。</p>

<p>我们之所以会对非模态对话框困惑，是因为我们更熟悉模态对话框。模态对话框会在调用 的瞬间，为当前的选择进行自我调整。而且，模态对话框认为在它存在的过程中，用户的选择
    不会变化。相反，在非模态对话框存在的过程中，选择很可能发生改变。那么对话框应该怎样 呢？例如，如果使用非模态对话框修改文本，而我们在主窗口选择一些非文本对象，情况会怎
    么样呢？对话框的小控件应该变灰？冻结？消失？诸如此类的问题，需要我们细化设计实践， 并且还要对人物角色的需求、目标和心理模型有密切的了解。模态对话框冻结了应用的状态，
    没有这些问题，因此，非模态对话框的设计和实现要比模态对话框难得多。</p>

<p>非模态对话框经常会有几个按钮，可以立即激活不同的功能。单击任何一个功能按钮，对 话框都不应该关闭。因为它始终存在，可以反复使用，只有点击那个处在固定位置上的 “ 关闭 ” 按钮时，才会关闭，所以它是非模态的。</p>

<p>非模态对话框也必须特别节约像素。它们驻留在屏幕上，占据前面的中心位置，所以必须 特别小心，在不必要的情况下不要浪费像素。</p>

<p>非模态对话框和撤销</p>

<p>在模态对话框中，用户知道，执行的动作发生在最后，因而可以在对话框中对当前的设置 进行适当调整。而非模态对话框不同，里面的控件总是处于活动状态，在模态对话框里能做的 事情，在这里不能做。</p>

<blockquote>
    521<br/>
    <br/>
</blockquote>
<p>在非模态对话框中，用户做出的改变是立即生效的，一旦有输入或单击了按钮，动作就立 即会发生，没有 “ 取消所有动作 ” 的概念。在许多选择中可能有许多独立的动作，在这里，合 适的习惯用法是撤销（ undo)
    功能，它位于工具栏或编辑菜单中，适用于应用程序活动范围内 所有的非模态对话框。它在逻辑上也是合适的，因为撤销功能在模态对话框中不可用，而在非 模态对话框中可用。</p>

<p>非模态对话框中，唯一一致的终止动作是 “ 关闭 ” ，通常在非模态对话框窗口标题栏上。不 过，如果关闭按钮除了关闭之外，还激活了某个功能，你就不该用非模态对话框，而应该创建 一个模态对话框按照模态对话框的习惯用法来设计。</p>

<p>非模态对话框和边栏</p>

<p>如果某个非模态对话框的工作，是为主窗口内的活动提供持久的支持，则我们最好不要用非 模态对话框，而要用边栏控件窗格（ sidebarcontrolpane)( 参见第 18 章)。边栏具备所有非模态对
    话框的好处，并且不会强迫用户放下手中的工作，在一个额外的浮动窗口内管理一系列的控件。现 在的显示屏的分辨率越来越高，因此我们有越来越强烈的理由将常用功能放到边栏或工具栏中。</p>

<p><span id="filepos0002803691"></span></p>

<p><u>对话框的五个目的</u></p>

<p>模态对话框和非模态对话框的概念，来源于开发人员的术语。他们影响了我们的设计，我 们必须从目标导向的观点来考察对话框。就这个角度，对话框要传递的信息主要有五类：属性 (property) 、功能（ function) 、进度（
    process) 、通知（ notification) 和公告（ bulletin )。</p>

<p>属性对话框</p>

<p>属性对话框（ propertydialog) 向用户呈现或让用户改变所选对象的属性或者设置。一般来 说，在属性对话框中，用户可以修改当前的选择，也可以设置应用程序的全局属性。（本章后面 的图 21-31
    所示的是一个更为夸张的对话框。）你可以把属性对话框当做针对所选对象的控制面 板，它包含一些可调用的配置控件。</p>

<p>属性对话框通常是非模态的。不过，对所选对象的属性进行大量和频繁修改的操作，最好 还是在任务窗格或边栏（参见第 18 章）中进行，不要放在对话框里，更不要放在模态对话框中。 对话框仅适合那些不必频繁操作的或仅需要设置一次的属性。</p>

<p>功能对话框</p>

<p>功能对话框 （flmction dialog) 通常从菜单中打幵，是最常见的模态对话框，只控制单一功 能，如打印、插入对象或拼写检查。</p>

<p>522</p>

<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<p>功能对话框不仅允许用户启动一个动作，而且也经常允许用户设置动作的细节。例如在许 多应用程序中，当用户请求打印，使用打印对话框指定打印多少页，打印多少份，向哪一个打 印机输出，以及其他与打印功能相关的设置。对话框上的 “OK”
    按钮，不仅确认设置，关闭对 话框，而且启动打印操作。</p>

<p>这种技术虽然普通，但将两种功能组合成一种：配置功能并启用之。仅仅因为一个功能可 以配置，并不意味着用户在每次调用之前都想重新配置。因此让这两种功能分幵访问会更好。</p>

<p>现代软件的许多功能相当灵活，有许多可配置的选项。如果不把配置和实际的功能隔离开， 那么，即使用户只是想执行一项简单的例行任务，也得被迫面对相当复杂的情况。</p>

<p>进度对话框</p>

<p>进度对话框 （process dialog) 是由应用程序启动的，而不是因用户的请求而启动的。它们 向用户表明当前应用正在忙于某些内部功能，其他功能的处理能力可能会降低。</p>

<p><img align="baseline" alt="" height="70" src="../Images/Image00204.jpg" width="54"/></p>

<p>某个应用如果启动了一个将要运行很长时间的进程，进度对话框就必须清晰地指出它很忙 , 但一切正常。如果应用没有表明这些，好一点的话，用户可能只会认为它粗鲁；不好的话，会 认为应用已经崩溃，必须采取极端措施。</p>

<p>设计原则</p>

<p>应用程序无响应状态，必须通知用户。</p>

<p>很多应用程序在运行进程时，会给出等待光标的提示，把光标变成旋转的小球或沙漏，并 禁止点击。此时，进度对话框是一种更好且更有信息量的解决方法。</p>

<p>每个进度对话框都应该向用户清晰地展现如下信息：</p>

<p>• 一个耗时的进程正在运行中。</p>

<p>參现在一切正常。</p>

<p>• 该进程还需要多长时间才能完成。</p>

<p>• 还有多少事情或项目没有做完（如果还在进行的话）。</p>

<p>• 用户如何才能取消该操作，或重获控制权。</p>

<p>进度对话框本身满足了第一个要求，提醒用户某个进程正在运行。第三个要求可以用某种 进度表 （progress meter) 来实现，显示已经完成工作所占的相对比例，以及还有多少需要完成。
    要满足第二个要求不容易，应用可能已经崩溃（或失去与服务器的连接）而对对话框置之不理， 也不向用户说明操作状态。进度对话框必须持续显示，通过时间的变动表明一切进度顺利。进</p>

<p align="right" height="0pt" width="0pt">About Face 4 :交互设计精髓</p>

<p>度表应该显示相对整个过程所耗费时间的进度，而不是相对整个过程规模的进度。一个过程的 前 50°/ 〇可能与接下来的 50% 在时间上差别很大。</p>

<p>对于一个计算机正在执行的耗时进程，用户的心理模型是：它很像是一个不停转动的机械 装置。一个表明计算机在读磁盘的静态对话框，只能告诉用户正在发生一个耗时的进程，但它
    并没有显示这真的很耗时。最好的进度显示方式是在对话框中使用动画，用户会意识到计算机 真的在做某件事。这种一切正常的感觉是本能的（ visceral), 而不是理性的（ cerebral ),用户甚 至是专家用户，也会安心。</p>

<p>有时，用户可能会临时改变主意，取消并推迟这件要花很长时间的事情。有时，用户可能 会意识到他调用了错误的命令，并希望取消操作，在这种情况下，他不仅希望停止操作，而且 还希望能撤销已经执行了的操作。</p>

<p>要实现这个目的，有个好办法 _ 我们在对话框中放置两个按钮：一个 “ 取消 ” ，一个“暂 停 ” ，用户可以根据自己的需要选择其中之一。</p>

<p>对于报告进度这项功能，我们还应该再换个角度好好思考一下。因为一个对话框是一个单 独的 “ 房间 ” ，我们必须了解对话框所报告的过程是否与主窗口的功能互相独立。如果该功能是 主窗口功能的一部分，它的状态就应该在主窗口中显示。例如，
    Windows 中有一个文件复制对 话框，可是文件复制难道不是资源管理器（ Explorer) 的基本功能吗？所以，我们应该在资源管 理器的主窗口中，放置一个文件复制进度的动画显示。</p>

<p>当然，开发一个进度对话框，要比直接在应用主窗口幵发一个动画容易得多。它们也提供 了便利的 “ 取消 ” 按钮，所以在耗时的任务中显示一个进度对话框是合理的权衡。但我们不能 无视这样的事实，这样做相当于 “
    我们将这个房间的功能拿到另一个房间去完成”。这是一个容 易的方法，但不是正确的方法。诸如谷歌的 Chrome 和微软 IE 那样的网页浏览器中，提供了一
    种更为优雅的解决方法。由于加载网页是它们内在的操作，因此这个进度指示器（一个正在旋 转的环形）被安放在当前加载页的标签栏中，如图 21-27 所示。</p>

<blockquote>
    ^ ^ ^ C'JC <font size="1">〇</font> op«r <font size="1">i</font> A user experiei^ <font size="1">x Cooper
    Journal</font> 夺 X _ <a href="http://www.cooper.com/journal/">www.cooper.com/journal/</a> S
</blockquote>
<p align="right" height="3pt" width="0pt"><font size="2">图</font> 21-27 <font size="2">像谷歌</font> Chrome <font size="2">这样的网页浏览器</font>
    . <font size="2">每次加载页面时并不弹出一个进度对话框，而是在当前加载页的标签栏</font></p>

<p><font size="2">中显示一个进度指示器，有些网页浏览器，将这个进度指示器放在了</font> URL <font size="2">输入栏中，或者是窗口底端的状态栏里。用户</font></p>

<p><font size="2">可以很容易地了解到当前的进度，而面前部分加载的页面也不会被遮挡。</font></p>

<p>通知对话框</p>

<p>通知对话框 （notification dialog) 将一些重要信息报告给用户。这些重要信息或者来自于一</p>

<p align="right" height="2em" width="0pt">524<br/>
    <br/>
    第 21 章设计细节：控件和对话框</p>

<p>些被触发的事件，或者来自其他用户的通信信息。报警、约会信息、电子邮件、即时通信等都 会产生通知。它们与系统产生的警告（本章前面讨论过）是不同的，系统产生的警告是应用自 发产生的，内容仅与自身内部问题或内部事件有关。</p>

<p>移动设备大量使用了通知，包括了通信类应用的通知，以及移动过程中发生的基于位置和 时间信息的通知。这些在移动设备上常用的习惯用法，随着通信类应用幵始覆盖到各个平台上， 它们在桌面应用和 Web 应用上也开始流行起来。</p>

<p>移动设备通常使用通知中心 （notification center) 来收取和管理各种通知。这样，当用户忙 完手中的事情后，可以到通知中心中查看和处理这些通知，例如，正在驾驶中的用户，将车停
    好后；用户登上公交车找到座位坐稳后；用户打完电话后等。</p>

<p>一般来说，通知会在屏幕的边缘以很小的弹出式窗口或抽屉的形式出现，还会伴以细微的 动画引起用户的注意。这些带有动画的通知窗口或抽屉，可以非模态地长时间驻留在屏幕边缘，
    也可以显示片刻后自动关闭，在通知中心中留下未读的标记，以引起用户的注意。设计通知对 话框时要注意：通知中心应该收取并保留一段时间高级别的通知，当有新通知或未读通知时， 应该在界面上清晰地、显著地、持久地标注出来。</p>

<blockquote>
    公告对话框
</blockquote>
<p>公告对话框 （bulleting dialog), 和进度对话框一样，由应用程序直接启动，不是由用户请 求发起的。公告对话框有三种 .• 错误、警告、确认。它们或者是报告应用的内部状态，或者是
    引起用户注意并让用户决定应用的内部状态。公告对话框是无趣和乏味的，而且经常被错误地 使用。仅凭这些，它们足以称得上是最糟糕的交互方式。</p>

<p>错误对话框无处不在，它们是公告对话框的典型代表。通常，应用程序名在标题栏中显示 , 一些概括问题的简短文字作为显示主体，一个图像图标表明问题的严重性，还有一个 “0K ”按
    钮，这些构成了一个统一的整体，有时再加上一个启动在线帮助的按钮。图 21-28 所示的是 Word 中的一个例子。</p>

<p><font size="1">龜麄</font> The measurement must be between -22M and <i>mmkm</i> <font size="2">22</font> ".</p>

<blockquote>
    <font size="2">图</font> 21-28 <font size="2">本图是一个非常典型的公告对话框。它并不是用户发起的，而是应用程序内部出了问题弹出来的，有时是应
    用程序自吹自擂说它自己成功地克服了某种困难本例中的这个对话框，实际上在责备用户，而不是帮助用户解决问题。 用户对这个对话框中文本的解读是：</font> “ <font size="2">输入数值的范围必须在</font> -22
    <font size="2">英寸到</font> 22 <font size="2">英寸之间。你连这个最基本的常识都不知道。 你太笨了，以至于我甚至都不愿意帮你改成正确的数值</font> ”
</blockquote>
<p align="right" height="1em" width="0pt">525</p>

<p>About Face 4: 交互设计精髓</p>

<p>公告对话框一般都是应用程序级模态的 （application modal ),它们会停止应用程序当前正 在执行的工作，直到用户给出终止该对话框的命令，例如单击一下 “0K” 按钮。这种情况称为
    阻塞型公告，因为直到用户回应，应用程序才能继续运行。</p>

<p>应用程序也有可能显示一个对话框，然后又让它消失。这种类型称为临时型公告，因为无 须用户参与，对话框便自动消失，应用程序可以继续。</p>

<p>临时公告有时用于报告错误。显示错误消息来报告问题的应用可能会自己纠正错误，也可以 通过其他代理检测问题是否消失 <font size="2">。一</font> 些开发人员会发布错误通知或公告，仅仅是警示，例如“你 的磁盘快满了！ ”
    ， 10 秒钟后它又自动消失。这种类型的行为，实际上存在着可用性问题。</p>

<p>错误、警告或确认消息，应该暂停当前的应用，或者至少是保留当前的状态直到获得用户 的注意。否则，用户也许不会仔细阅读它；也许他把脸转过去了，要么看不见，要么甚至更糟 糕 ——
    只用眼角瞥到一点。他有理由怀疑错过了一些重要的东西，某些以后会回过头困扰他的 东西。他开始担忧：我错过了什么？是不是会让我后悔的重要消息吗？是系统不稳定吗？是不 是即将要崩溃？即使问题已经自行解决了，也真的会出现这些顾虑。</p>

<p>如果某件事值得用对话框来表达，那就要确保用户能够清楚地获得这些消息。但临时型公 告无法保证做到这一点，它永远不能，也不应该用于错误报告或寻求确认。错误、警告、确认 公告几乎始终都应该是阻塞型的。</p>

<blockquote>
    <font size="7">&nbsp; <sub>
        <small><font size="7"><font color="#000000">0</font></font></small>
    </sub></font>
</blockquote>
<blockquote>
    设计原则
</blockquote>
<p align="center" height="0pt" width="0pt">绝不要用临时型对话框作为错误对话框或确认对话框。</p>

<p>属性、功能、通知对话框，是用户主动请求的 —— 它们为用户服务。但是，应用程序发起的 公告对话框 —— 它们为应用程序服务，常常会牺牲用户利益。我们在本章后面将会讨论，应该把
    这些讨厌且无用的对话框直接铲除掉，换成更加友好的、能给用户带来真正帮助的交互方式。</p>

<p>管理属性对话框和功能对话框</p>

<p>尽管对于对话框的使用和管理，你已经很尽心尽责了，但是它们还是很轻易地变得十分拥 挤 —— 对话框里很快就会充满属性、选项或者其他对象。管理这种拥挤有几种常用的策略，保 证对话框的有效使用。</p>

<p>选项卡对话框</p>

<p>20 世纪 90 年代，选项卡对话框 （tabbed dialog )迅速成为了商业软件世界中的一个重要标</p>

<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<p>准。这种交互方式很好用，同时它也不幸地成为了便捷手段，开发人员有时把没有关联的一大 堆功能塞入同一个对话框中。</p>

<p>很多应用程序的对象具有丰富的属性，用一个同样丰富的属性对话框，通过多个选项卡的 方式来管理（参见图 21-29 中的例子 ) 。我们无须像以前一样，不必再用充斥着大量控件的大对
    话框。很多原来必须要塞满控件的功能对话框，因此也可以更好地利用空间。在标签对话框出 现以前，通过扩展对话框或者级联对话框解决这个问题显得很笨拙，稍后我们会谈到扩展对话 框和级联对话框。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00038.jpg"/></p>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> <font size="6">21-29</font> <font size="2">这是</font> <font size="6">iTunes</font> <font
        size="2">中的选项卡对话框，它把一首歌的所有属性都放在了一个对话框中。用户的使用效率很高，在一个 地方就可以找到所有的东西。我们还可以看到，终止控件的位置也很正确一它在选项卡窗格的外面，在整个对话框的
    右下角。</font>
</blockquote>
<p>拥有更多的控件并不一定意味着该界面更易于使用或者功能更强大。对话框中不同窗格的 内容，必须有放在一起的道理，否则，这种能力对开发人员有利，而不是对用户有利。</p>

<p>对话框中选项卡的数量，可以随着组织管理某个专题的深度或广度的增加而增加。在组织 管理广度方面，每个选项卡涉及主题的不同特性。如图 21-29 所示的 iTime 的歌曲属性对话框，
    用多个选项卡来组织不同类别的属性。在组织管理深度方面，每个选项卡可以对同一特性的主 题进行更深入的探索，例如 “ 高级 ” （ Advanced) 标签窗格就是最常见的一种。</p>

<p>选项卡之所以如此成功，是因为该习惯用法遵循了用户日常存放东西的心理模型。不同控 件组成几个平行窗格，只有一个层次深度。但甚至这种习惯用法经常被滥用。</p>

<p align="right" height="2em" width="0pt">527</p>

<p><img align="baseline" alt="" height="64" src="../Images/Image00053.jpg" width="111"/></p>

<p>About Face 4 :交互设计精級</p>

<p>因为你可以轻易地在选项卡对话框内塞入如此多的控件，在对话框内添加更多选项卡的诱 惑很大。图 21-30 中所示的 Word 选项卡对话框就是一个典型的例子。 10 个选项卡数目太多，
    不能用一行显示，所以它们堆叠成两行。这种用法称为堆叠选项卡，它有很大的问题，即如 果单击后一行的标签，整行就会前移，另一行就会退后。很少有用户会喜欢这样，因为用户
    单击选项卡而选项卡又在鼠标光标下移出，让用户感觉不安。所以，后来微软基本上放弃了这 种用法。</p>

<blockquote>
    <font size="1">Security SpeinQ Grammar</font>
</blockquote>

<blockquote>
    <font size="1">User Informabor CompatMfty</font>
</blockquote>

<blockquote>
    ^ Ed*
</blockquote>
<p><font size="1">icOtanges e Locations</font></p>

<p>QSt4itupT«sfcPane</p>

<p><font size="1">(v] Boolgnariis Q Status bar</font> <font size="1">BScroe</font> <font size="1">〇</font> <font
        size="1">Tps</font> <font size="1">ForiMtUng mdrfcs 〇 lab characters</font> □ Spaces <font size="1">〇 Paragraph
    rftaiis Pmt «nd Web Layout 〇( B〇raMngs 〇 Object anchors D T®25|t boundanes</font> 0 Smart tj|Qs 0 Animated text PI
    Honyantal saol bar @ Vertical sarol bar</p>

<p><font size="1">□ pldcehoiders</font></p>

<p><font size="1">Q^ddentext 〇 Optional hyphens</font></p>

<p><font size="1">□ A|</font></p>

<p><font size="1">0 WNte space bet¥«een pages (Print view onlyi 口</font> <font size="1">gKioground colors «nd inagn
    (Print v»w only) 0 V®rt&lt;al afar (Print view or*y)</font> OutSne «yJ Normd opttoos Q ^ap to window 9yte arga
    wkJtti: □ graft font:</p>

<p height="0pt" width="0pt"><font size="5">DC</font></p>

<blockquote>
    <font size="2">图</font> <font size="6">21-30 Word</font> <font size="2">中的选项卡对话框是一个关于选项卡的极端例子。当然，许多内容填充到一个对话框是好的。问题在于
    选项卡的移动！激活的选项卡必须位于底部这行，所以如果你单击拼写和语法，这一行就必须下降到底部，另一行则上 升到顶部。没人能记住不固定位置的选项卡到底在哪里，实际上，将它分成更小一些的对话框会更好。</font>
</blockquote>
<p>堆叠选项卡说明：所有的习惯用法，无论有多少优点，都有它的实践局限性。 5 个单选按 钮组成一组可能很好，但 50 个单选按钮组成一组就很荒谬。 5 、 6 个选项卡组成一行是好的，
    但是添加过多的选项卡导致标签堆叠，就破坏了这个习惯用法的美好。</p>

<blockquote>
    所有交互的习惯用法都有其适用范围。
</blockquote>
<p>有一种更好的办法，不要用一个包含很多选项卡的对话框，而是用几个有着较少选项卡的 对话框。在图 21-30 的例子中，选项的分类太广，将所有这些功能混在一块对用户没有任何好 处。 12
    个窗格之间几乎没有联系，所以不需要将它们放在一起。这种解决方法可能在编程中少</p>

<p>528</p>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<p>第 21 章设计细节：控件和对话框</p>

<p><br/>
    <br/>
    <br/>
    <br/></p>

<p><img align="baseline" alt="" height="69" src="../Images/Image00118.jpg" width="54"/></p>

<p>了那么一点点优雅，但对用户可能更好。</p>

<p>设计原则</p>

<p align="right" height="7pt" width="0pt">不要堆叠选项卡。</p>

<p>扩展对话框</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00176.jpg"/></p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00373.jpg"/></p>

<p>扩展对话框（ expandingdialog), 在扩展后会显示更多控件。对话框有一个 “ 更多 ” 或“扩 展 ” 的按钮。当用户单击它时，对话框变大，占据更多屏幕空间。扩展部分的对话框所包含的
    功能，通常是为高级用户提供的，更复杂且与原先显示的功能相关。我们非常熟悉的微软 Word 的查找和替换对话框，就是这个习惯用法的一个典型例子，如图 21-31 所示。</p>

<blockquote>
    图 <font size="2">21-31</font> 微软 <font size="2">Word</font> 中的查找和替换对话框是一个典型的扩展对话框：左图显示的是它的原始状态，右图是它扩展后 的界面。
</blockquote>
<p>扩展对话框使得生疏用户或新手用户不必面对那些复杂的工具，而熟练用户也不必为寻找 这些工具而烦恼。你可能认为这种对话框既适用于初学者，也适用于高级用户。但是，这种类
    型的对话框必须小心设计。当应用有了这样一个同时服务于初学者和专家的对话框时，经常发 生的情况是，它不但对初学者傲慢无礼，也给专家用户带来了麻烦。对话框最好是可以记住上
    次被调用时所处的使用状态。当然，这也意味着你应该在对话框上设置一个 “ 缩简 ” 或者“较 少 ” 命令（ Shrink 或者 Less), 可以让对话框返回到初学者状态。</p>

<p>级联对话框</p>

<p>级联对话框（ cascadingdialog), 是一种很糟糕的习惯用法。级联对话框中的第一级对话框 里，通常有一个按钮控件，点击它可调出另一个对话框，即二级对话框，二级对话框经常覆盖</p>

<p align="right" height="1em" width="0pt">529</p>

<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00065.jpg"/></p>

<p>About Face 4 :交互设计精髓</p>

<p>第一级，有时二级对话框还可以继续调出第三级对话框。多么混乱呀！幸好，级联对话框已经 失宠，但我们仍然可以找到级联对话框的例子。图 21-32 中的例子来自 Windows Vista 。</p>

<p>Formats | Location | Keyboards and Languages | Administrative</p>

<p><font size="2">Text Services and Input Languages</font> <font size="1">[General [</font> Language Bar ] Advanced Key
    Settings i Add Input Language</p>

<p><font size="1">Select the language to add using the cheddK»«s below.</font></p>

<p><font size="1">ffi Afrikaans (Soi</font></p>

<p><i>\±i</i> <font size="1">Alsatian (France) ffl Amharic (Ethiopia) itj Arabic (Algeria) f±) Arabic (Bahrain)</font>
    <font size="1">El Arabic (Egypt)</font></p>

<p><font size="1">mth Africa)</font></p>

<p><font size="2">图21-32你仍然可以在Windows中找到级联对话框。每个对话框有一套终止按钮。级联对话框产生了不少附加工作， 它还很模糊，这些都是没有好处的。</font></p>

<p>很难理解使用级联对话框会怎么样。一部分问题在于第二级对话框至少会遮盖第一级的一部 分。那也不是大问题，毕竟组合框和弹出菜单也这样，而且某些对话框还可以移动。真正的
    混乱和模糊来自于第二级对话框终止按钮的出现。每个取消按钮的范围是什么？我们确认的 是什么？</p>

<p>这是界面层次太深，太过复杂的主要症状。即使如此，应用仍需要使用级联对话框，可能 仅仅是因为存在着一些模糊信息，而这些模糊信息又不是用户想要的。这时，就应该全面审査
    一下界面的整体设计了，你可以发现一些严重的结构问题。这些结构方面的问题，可以用一些 标签对话框、边栏、工具栏（对话框可以从这些地方调出）来解决。</p>

<p>对话框可以成为帮助用户完成目标的有用助手，而不是让他们在每一步遭受挫败的可怕绊</p>

<p>530</p>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<p>脚石。通过保持对话框的可管理性，并且只有在它们的功能真的属于 “ 另一个房间”的情况下 才调用它们，你将很好地维持用户的工作流状态，保证他们会成功完成任务，并且满怀感激。</p>

<p><span id="filepos0002846055"></span></p>

<p><font size="6">消除错误、警告和确认</font></p>

<p>正如我们已经讨论的，公告对话框被用于提示错误消息、警告消息和确认消息（ error 、 alert 、 confirmation), 这是数字产品中问题最大的交互方式，完全称得上 “ 臭名昭著 ” 。实际上，我们
    完全可以用能更好满足用户目标和需求的其他交互方式来取代这些对话框。本章中，我们将探 讨关于这个话题的 “ 为什么 ” 和 “ 怎么做”。</p>

<p><span id="filepos0002847204"></span></p>

<p>错误对话框</p>

<p>在用户界面的世界里，错误对话框可能是最让人讨厌的交互方式，也是被滥用最多的 <font size="2">。一</font> 般来说，它们设计得很差、提供不了帮助、粗暴无礼。最糟糕的是，它们在一开始根本就不打
    算阻止错误的发生。它们本身是罪恶的，但这里最重要的是，我们首先要尽全力在应用程序中 合适的时间和地方中找到根源，并将它们清除掉。</p>

<p>错误对话框有什么问题</p>

<p>用户犯了错误时，不应当受到训斥。实际上，他们需要的是帮助，应用程序应该告诉用户 如何去避免错误，以及犯错误的可能后果。应用应该有责任帮助用户把事情做好，而不应该粗 暴地拒绝用户的输入。</p>

<p>计算机时代的早期，开发人员并没有注意到软件和人打交道时应该注意一下方式和方法， 例如在要求使用者输入时，或者使用者没有按照软件的意思去做的时候。实际上，如果软件只
    是一味地要求使用者必须按照软件的规则来操作，而并不是软件自己调整自己去适应使用者的 行为，这种糟糕的问题就会一直存在下去。所以，错误对话框大肆流行。</p>

<p>人有情绪和感觉：软件应用没有。当一段代码拒绝另一段代码的输入时，输入的代码没有 感觉；它不会皱眉，不会受到伤害，也不会求助于心理咨询。人则不同，当他们平白无故地被
    告知是傻瓜时，会很生气。不要犯错误：当用户看到这种错误消息时，就好像是有人说他很笨 一样（参见图 21-33) 。毫无疑问，用户讨厌这类消息。可是很多开发人员仍然熟视无睹，继续
    大量地使用错误消息。他们不知道还有其他更好的方法可以创造出可靠的软件。</p>

<blockquote>
    531<br/>
    <br/>
</blockquote>
<p><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00271.jpg"/></p>

<p>“ 用户需要知道他们犯了错误 ” ，这一假设也是不对的。你输入了无效的字号大小，这条消 息对你来说有多重要？大多数情况下，应用程序应该找到更合理的替代方式，而不是责备用户。</p>

<p>About Face 4 :交互设计精髓</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00271.jpg"/></p>

<p>图 <font size="2">21-33</font> 就算你的错误对话框的用词是十分礼貌的，但用户还是会这样理解的。</p>

<p>大家都知道，当别人在公共社交场合失礼时，直接告诉他们是很不礼貌的。告诉他有菜叶 粘在他的牙齿上，或者裤子拉链没拉好，是让双方都很尴尬的事。聪明的人会设法引起对方注
    意，而不惊动其他人。但很多软件却用屏幕正中央巨大而醒目的对话框停止一切活动，并且发 出责备的 “ 嘟嘟 ” 声，这难道是一种得体的行为吗？</p>

<p><img align="baseline" alt="" height="71" src="../Images/Image00114.jpg" width="54"/></p>

<p>许多设计者和开发人员认为，他们的错误对话框是在提醒用户一些严重的问题。这是一种 普遍存在的错误认识。其实，大多数错误对话框是在告诉用户，应用程序无法灵活工作，并承
    认应用程序自己的愚蠢。换句话说，对于大多数用户来说，错误对话框简直就是愚蠢地停止了 工作进度。我们可以通过消除错误对话框来大幅度改善界面的质量。</p>

<p>设计原则</p>

<p>错误对话框愚蠢地停止进度，应该避免。</p>

<p>到底是谁的错</p>

<p>传统的看法认为错误对话框的作用是在用户错了的时候通知他们。实际上，大多数错误消 息的作用，是在计算机自己糊涂的时候向用户报告。用户所犯的错误比想象的要少得多。典型 的 “ 用户错误 ”
    包括用户输入了一个界限以外的数字，或者在应用程序需要数字的地方输入了 一个字母。</p>

<p>当用户输入了一些按应用程序标准不能理解的数据时，这到底是谁的错？是因为用户不知 道到底该如何正确使用应用程序，还是应用程序没有更清楚地说明选择和结果？</p>

<p>信息以不熟悉的顺序被输入，常被软件认为是个错误。但人类处理这种不熟悉的顺序，完 全没有困难。人类知道如何等待时机，耐住性子，直到事件结束。软件则会草率地下结论，认</p>

<p>532<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<p>为违反顺序就是错误的输入，并且发出讨厌的错误消息。</p>

<p>例如，当用户创建一张没有顾客号码的发货单时，多数应用会拒绝输入。它们愚蠢地停下 来，要求用户必须立刻输入正确的顾客号码。另一种方式是：应用程序可以先接受这个任务，
    并期待着最终会输入有效的顾客号码，或者用户也可能会创建一个新的顾客。应用可以给用户 一个视觉丰富的非模态反馈（我们在第 15 章中详细讨论过 ) ，提示这个数字无法识别，然后等
    待并确保用户输入了有效的顾客号码，在交易结束或者月账簿关闭时检查用户是否输入了必要 的信息。</p>

<p>如果用户忘记了向应用程序完整地解释某事，应用程序可以经过某些合理延迟后，给用户 持续的信号。在一天或一周结束时，应用程序可以将不能协调的事务转移到暂停账目中。应用
    程序不必用错误对话框阻止处理的进行，毕竟，应用程序会记住这个事务，并进行跟踪和修正。 只要用户能够获得条目还需要整理的通知，就不应该有什么问题。这里的技巧在于通知用户而 不要停止整个过程。我们将在本章后面进一步讨论这个问题。</p>

<p>错误消息不管用</p>

<p>错误对话框的终极讽刺是：它无法阻止用户犯错误，也就是说，它无法发挥它的作用。在 我们的想象中，用户可以脱离麻烦，因为我们相信错误对话框可以指引他们，但这是一个错觉。
    错误对话框真正所做的只不过是：保护应用不陷入麻烦。在大多数软件中，错误对话框像哨兵 一样在应用程序敏感的地方放哨，而不是在用户最危险的地方放哨。它有一种根深蒂固的信念 ,
    那就是应用程序比用户重要。其实无论错误消息的数量和质量如何，用户在使用软件的过程中 都会有大量的麻烦，一个错误对话框所能做的就是防止用户不向数字段中输入字母，它与防止 用户不输入错误数字无关，因为这个设计任务更难。</p>

<p>如何消除错误消息</p>

<p>我们不能通过简单地抛弃那些显示实际错误对话框的代码，一旦出现问题，就让应用崩溃 来消除错误消息。相反，我们必须重新编程使它们不再容易出问题，必须用更苗壮的软件取代
    错误消息，防止错误产生，而不是让应用程序在事情与其预料的不同时，只会发牢骚。就像是 预防接种抵御疾病的疫苗，我们使应用程序对问题具有免疫力，然后我们就可以抛弃报告问题
    的消息。为了消除错误消息，我们必须首先消除用户犯错误的可能性。不能认为错误消息是正 常的，我们必须把它视为解决罕见问题的特殊方法，要把这种方法看作外科手术，而不能看成 阿司匹林。我们必须把它当做最后一招。</p>

<p>软件设计者必须重新评估 “ 无效数据 ” 的概念。当它来自人类时，软件必须认为输入是正 确的，原因很简单，那就是人类比代码更重要。软件不但不能拒绝输入，而且必须努力去理解
    和调整输入造成的混乱。应用程序能够理解计算机内部事物的状态，而人类只能理解真实世界</p>

<blockquote>
    533
</blockquote>
<p>的事物状态。从根本上说，真实世界比计算机所思考的要更有意义，也更重要。</p>

<blockquote>
    让错误不可能发生
</blockquote>
<p>使用户不可能犯错是消除错误消息的最好方法。通过为所有的数据输入使用有界控件（比如 微调器或者下拉列表框 ) ，可以防止用户输入错误的数字。与其迫使用户键入选择不同，不如让
    用户从包含可能选项的列表中选择。例如与其让用户输入州编码，不如让用户从有效的州编码列 表或者地图中选择。换句话说，使用户不可能输入错误的州名 。®</p>

<blockquote>
    ；1■原则 让错误不可能发生: 另一个消除错误对话框的好方法是让应用程序变得足够聪明，使用户不再提出不必要的请 求。许多错误对话框显示： “ 无效的输入。用户必须输入 xyz 。”既然应用程序知道用户必须输
    入什么，它为什么不自己直接输入 xyz, 而不是斥责用户呢？让应用程序记住过去访问过的文 件，允许用户在列表中选择，取代用户在磁盘中寻找文件的要求，因为那样用户可能选择错
    误的文件。另一个例子是设计从内部时钟或互联网上获取时间信息的系统，用来取代请求用 户输入。
</blockquote>
<p>毫无疑问，所有这些解决方法都会加大开发人员的工作量。但是，开发人员的工作是为了 满足用户要求，而不是反之。如果开发人员把用户仅仅当做另一种输入设备，那么在软件设计 中就很容易忘记正确的主次关系。</p>

<p>用户不会同情开发人员的困难，不会看到错误对话框背后的技术原理，所看到的是应用程 序不愿以人类的方式处理事物。他们将所有的错误对话框都当做图 21-34 所示的对话框变体。</p>

<blockquote>
    讨厌的应用 <font size="5">D</font>
</blockquote>
<blockquote>
    <font size="1">丨干</font> <font size="2">掉整个硬盘？</font>
</blockquote>
<blockquote>
    <font size="2">图</font> <font size="2">21-34</font> <font size="2">这是大多数用户理解错误消息对话框的方式。用户把这当做卡夫卡式的审问，每个后续的选择都会导致惩罚
    和悔恨。</font>
</blockquote>
<p>错误对话框的一个问题在于，它经常是事后诸葛亮。它们显示： “ 坏事发生了，你所能做的 就是承认灾难的降临。 ” 这样的报告没有任何帮助，而且这些对话框还总是带有一个 “OK ”按</p>

<p>①译者注：州，指的是美国的州。<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<p>钮，要求用户承认是该错误的同谋。这些错误对话框让人联想到老战争片中的情景：一个倒霉 的士兵在经过稻田的时候踩上了地雷，他和他的战友清楚地听到地雷触发机制的滴答声，士兵
    意识到尽管现在是安全的，但一旦脚离开，地雷就会爆炸，带走他一大部分有用的躯体。用户 在看到多数错误对话框的时候都有这种感觉。</p>

<p>正面反馈</p>

<p>软件难以学习的原因之一在于正面反馈太少。人们从正面反馈中学到的知识比从负面反馈 中学到的更多。人们希望正确有效地使用他们的软件，这激励着他们学习如何使软件更好地为
    他们工作。他们需要的不是在失败时的象征性惩罚，而是在成功时受到奖励或至少得到认可。 如果他们得到称赞就会感觉良好，这种好心情会反映到他们的成果中。</p>

<p><img align="baseline" alt="" height="70" src="../Images/Image00017.jpg" width="54"/></p>

<p>负面反馈的鼓吹者可能举出许多负面反馈有效引导人们行为的例子。这些证据是真的，但 是几乎无一例外，有效惩罚反馈的场景是防止用户做他们想做但不应该做的事：例如开车不应 该超过时速 80
    千米，不要欺骗你的配偶，不要逃避所得税。但是回到帮助人们做他们想做的事 时，正面反馈是最好的。想象一下，如果你在学习滑雪，滑雪教练冲你大嚷大叫，这不会有什 么好的效果。</p>

<p>设计原则</p>

<p>当软件告诉用户他们失败时，用户会觉得很没面子</p>

<p>记住，我们谈论的是计算机给予的负面反馈。来自其他人的负面反馈尽管使人不愉快，但 可以在特定环境中评判。有人可能说，苛刻的教练至少可以使竞争心理更强大，专横的教授至
    少可以为你在现实世界中遇到的变化提前做准备。但是来自机器的负面反馈就是一种侮辱。军 士教员和教授至少是人，他们有善意的经验和功绩。但软件告诉你失败会让人觉得没有面子。
    计算机内部发生的任何事情都没有重要到可以羞辱或贬低人类用户的地步。</p>

<p>难道就没有特例吗？</p>

<p>错误消息必须要消除掉，有不需要消除的特例吗？答案是，只有很少的错误消息是不需要 消除的，或者说，绝大部分的错误消息都是必须要消除的。随着我们技术力量的不断增强，计
    算机硬件的便携性和灵活性也不断增加。现代计算机能在不断电的情况下连接或断开网络和外 围设备，硬件的增加或消失都是正常的，打印机、调制解调器和文件服务器可以像潮水一样来 去自由。随着 WiFi (
    无线局域网）和蓝牙等无线网络的发展，我们计算机与网络的连接和断开 变得很经常、很容易，而且，很快也会变得很透明。如果你在两个无线网中移动，这是个错误 吗？计算机崩溃后，用户没有选择关机就自动重启了，这是个错误吗？打印一个文档，却发现
    没有连接打印机，这是个错误吗？如果你编辑的文件，它所在的驱动器突然不能访问，这是个</p>

<p>About Face 4 :交互设计精髓</p>

<p>错误吗？</p>

<p>这些现象都不应该被看作错误。如果你在服务器上打开一个文件，开始编辑，然后带着笔 记本电脑去餐馆午餐，应用应该明白文件所在的主机不再可用，它必须做些更聪明的事。比如， 它可以用无线网通过 VPN
    远程登录到服务器上，或者只是在本地保存一些改动，当你吃完午餐 回到办公室，再和服务器上的版本同步。这些都是正常的行为，不是错误。每次遇到这种情况 时，你也没有必要在计算机上告诉它应该怎么做。</p>

<p>几乎所有的错误对话框都可以去掉。你从 “ 错误对话框必须消除，以及所有其他的事也得 因为这个目标而改变 ” 的角度去审视这种情况，就会发现这种判断完全正确，还会惊讶地发现，
    实际上实现这个目的只需要改变一点点。即使极个别情况下必须使用错误对话框也可以妥协。 但是程序员们应该承认，这种妥协是他们自己的失败。</p>

<p>当然，也一定存在着十分紧急的情况，需要以一种突然的、吸引注意力的方式来通知用户。 比如，在金融市场开市的时间段内，某投资经理在准备一些交易，当日闭市前必须完成，在闭
    市后把结果发给交易中心。期间一旦有情况导致他今天无法完成，则必须要把这个情况通知到 他，以采取相应的措施来应对，避免可能因为交易时间的问题导致重大损失。</p>

<p>改进错误消息：最后一招</p>

<p>如果真的不可能重新设计应用去消除不必要的错误对话框，这里还有一些改进错误消息的 方法。但请把这些建议当成最后一招，轻易不要直接使用，除非你真的没法消除错误。</p>

<p>错误对话框应该始终有礼貌、表达清楚，还要助人为乐。请不要忘记，错误对话框是应用 报告自己的失败，且这样做是在干扰用户。因此，错误对话框必须要时刻对人有礼貌。无论如
    何，错误对话框也不能指责甚至暗示是使用者造成的这个错误，因为从使用者的角度来看根本 不是这么回事。</p>

<p>错误对话框必须向用户说明问题。这意味着，它必须向用户提供一个解决问题所需要的信 息，必须澄清问题的范围，可选择的方法是什么，默认的情况下应用程序会做什么，以及丢失 了哪些信息。</p>

<p>但是，如果应用程序只是一味地将问题堆在用户身上，撒手不管，这是不对的。在错误对 话框中，最少应该直接提供一种正确的建议方法，应该提供以不同的方式处理问题的按钮。如
    果打印机不存在，对话框应该提供延期打印输出的选项，或选择另外的打印机。如果数据库已 经删除不能使用，它应该重建数据库，让用户回到工作状态，并告诉用户该过程要花费多少时 间，以及造成的负面影响。</p>

<p>图 21-35 展示了一个合理的错误对话框例子。请注意，它是有礼貌的、表达清晰的和有帮</p>

<p>&nbsp;</p>

<p>第 21 章设计细节：控件和对话框</p>

<p>助的。它甚至没有暗示用户的行为有任何缺陷。</p>

<p><i>It</i> <font size="2">Cooper的文档程序</font> <font size="2">■!</font></p>

<p><font size="6">▲</font> <font size="2">无法通过网络保存</font></p>

<p align="right" height="8pt" width="0pt"><font size="2">看起来网络连接中断了，这样便无法把</font></p>

<blockquote>
    <font size="6">Design document.xml</font> <font size="2">文件保存在它在</font> <font size="6">Moe</font> <font size="2">服务器上的原始位置了。</font>
</blockquote>
<p><font size="2">点击</font> <font size="6">“</font> <font size="2">确定”，文件的一个副本将被保存 在桌面上；点击</font> <font
        size="6">“</font> <font size="2">另存为</font> <font size="6">…”</font></p>

<p><font size="2">将保存到其他位置。当网络连接被恢复时</font> <font size="6">,</font> <font size="2">该文件将自动的被保存到原始位置。</font></p>

<p><font size="2">另存为</font> <font size="2">确定</font></p>

<blockquote>
    <font size="2">图</font> <font size="6">21-35</font> <font size="2">如果不得不用错误对话框，那么它的外观也必须和本图相似。它礼貌而清楚地向用户说明了问题，并提出解
    决问题的好建议。操作按钮及其产生的结果也描述得很清楚。</font>
</blockquote>
<p><span id="filepos0002874946"></span></p>

<p>警告和确认</p>

<p>和错误对话框一样，警告和确认对话框也愚蠢地停止了进度，也常常不报告故障。警告 (alert) 将应用的行动通知给用户，而确认（ confirmation) 却赋予用户忽略该行动的权力。这些
    对话框在大多数应用中如丛生的杂草，应该像对待错误对话框一样，运用更有用的习惯用法替 换它们，正如我们在第 15 章中讨论的那样。</p>

<p>警告：此地无银三百两</p>

<p>警告违反了我们先前提到的一个基本的设计原则：对话框是另一个 “ 房间”，去之前要有个 好理由（参见第 18 章）。即使有时你把应用要执行的行动告诉了使用者，但为什么要到另一个 房间去执行呢？</p>

<p>这种情况下，应用应该有勇气承认自己的错误，或者在没有用户的指令时不应该采取行动。 例如，如果应用把用户的文件自动保存到磁盘上，它应该自信地认为自己做对了。它应该让用
    户了解应用做了什么，而不必愚蠢地停止进程。如果应用不能确认它是否应该保存文件，它就 不应该保存文件，留给用户处理。</p>

<p>相反，如果用户指示应用做某事 —— 例如拖动文件到垃圾箱——它不需要为了告诉用户已</p>

<p>537</p>

<p><br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">About Face 4 :交互设计精髓</p>

<p>经将文件拖到垃圾箱而愚蠢地停下来。应用应该确保这个行为有足够的视觉反馈；如果用户确 实做了错误的动作，应用应该悄悄地为用户提供强大的撤销工具，让用户可以全身而退。</p>

<p>警告的原理在于告知用户。这是令人满意的目标，但不能以打断流畅的交互流作为代价。 图 21-36 中所示的这个警告对话框例子，这个警告带来的是麻烦而不是帮助。查找对话框（下
    面的那个），迫使用户完成搜索时单击取消按钮，而重叠的提示对话框使它成为了打断流的按钮 的藏身之地：首先是提示对话框中的 0K ( 确认）按钮，随后是査找对话框中的 Cancel ( 取消）
    按钮。如果把提示信息建立在主查找对话框中，用户的负担会减少一半。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="43" src="../Images/Image00251.jpg"
                                                width="100"/></p>

<p><br/>
    <br/></p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt"><img class="responsive-img" align="baseline" alt=""  src="../Images/Image00155.jpg"/></p>

<p><br/>
    <br/></p>

<p align="right" height="2em" width="0pt"><font size="2">图</font> <font size="2">21-36</font> <font size="2">这是一个典型的警告对话框。它不仅不必要、不恰当，而且愚蠢地打断了进度。</font>
    <font size="2">Word</font> <font size="2">的查找对话框已经完成</font></p>

<p><font size="2">了搜寻文裆的任务。报告事实是查找功能的另一个功能吗？如果不是，那为什么要用不同的对话框呢？</font></p>

<p>如何消除警告</p>

<p>因为警告对话框太容易创建了，所以造成数量众多。很多语言用一行代码就可以开发出消 息工具。而动画显示则需要上千行的代码。在这种情况下，我们难以指望程序员会做出正确的
    选择。因此，设计师必须精确地指定在应用界面上哪个位置用消息工具。接下来，设计师必须 穷追不舍，确保设计不会被快速编码妥协。想象一下，如果建筑工地上的承包人单方面决定不 加浴室，因为水管装置处理起来太麻烦，那后果会怎么样呢？</p>

<p>当然，软件需要告诉用户它的行动，应该在主屏幕上有可视化的指示，使用户立刻知道这 种状态信息。启动警告对话框来宣布一个没有请求的动作已经够糟的了，为一个已经请求的动 作再发起一个警告消息就更加荒谬。</p>

<p>软件需要灵活和宽容，但不必阿谀奉承。我们来看一下图 21-37 中的例子，这种警告是一</p>

<p>538<br/>
    <br/></p>

<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<p>种痛苦，应该消除这样的痛苦。它宣布应用已经成功地完成了同步——这是这个警告存在的唯 一理由。我们告诉这个应用做同步，几秒钟后同步完成，但它为了宣布这个显而易见的事情而
    停止了我们的进程。看起来这个软件像是在宣布它在十分努力地工作，想得到我们的认可。如 果一个人这样和我们打交道，我们会感觉到不太舒服，会感觉这个人有些傲慢无礼。当然，适
    度的反馈是可以的，但弹出来一个注定要被关闭的对话框，真的有必要吗？</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p>AirSet Desktop Sync <i>b^i；m</i></p>

<p align="center" height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p align="center" height="0pt" width="0pt"><img align="baseline" alt="" height="193" src="../Images/Image00283.jpg"
                                                width="317"/></p>

<p><br/>
    <br/></p>

<blockquote>
    <font size="2">图</font> <font size="2">21-37</font> <font size="2">这个对话框，来自</font> <font size="2">AirSet Desktop
    Sync</font> <font size="2">软件，完全是没有必要的阿谀奉承。我们告诉它去做同步，它却突然弹
    出这条消息来打扰我们的正常工作。这个软件要求我们认可它的工作，我们有必要认可它吗？简直是在浪费我们的时间。</font>
</blockquote>
<p>确认：喊 “ 狼来了”的对话框</p>

<p>当应用对自己的行为不自信时，经常用对话框询问用户来征求许可，如图 21-38 所示的对 话框，即被称为确认对话框。有时，应用软件让用户确认，是想让用户再考虑一下即将做出的
    行为。有时应用软件觉得自己无法做出这个决定，而用确认对话框让用户替它选择。</p>

<blockquote>
    Delete File B
</blockquote>
<blockquote>
    <i>’ ^</i> Arc you sure you want to move this file to the Recycle Bin?
</blockquote>
<blockquote>
    Windows 8 Recycle Bin Properties Item type: PNG File Dimensions: 354 x 401 Size: 13.5 KB
</blockquote>
<blockquote>
    <font size="2">图</font> <font size="2">21-38</font> <font size="2">每次我们删除</font> <font size="2">Windows</font> <font
        size="2">文件时</font> <font size="2">.</font> <font size="2">都会见到确认对话框，它在询问我们是否确定要删除是的</font> <font
        size="2">.</font> <font size="2">我们确定，我 们总是可以确定。如果错了，我们希望</font> <font size="2">Windows</font> <font size="2">能够为我们恢复文件。</font>
    <font size="2">Windows</font> <font size="2">用它的回收站满足了我们的愿望。既 然这样，它为什么还要发起确认消息？当例行公事地发起确认对话框的时候，用户也会习惯性地批准。所以当它最终向用
    户报告一个即将发生的灾难时，也会出于习惯地继续批准它。请为你的用户做点好事，不要再创建多余的确认对话框了。</font>
</blockquote>
<p>当程序员陷入编码僵局时，就在软件中创建一个确认对话框，因为他意识到编码可能会带 领应用做某种冒险动作，并要为此承担责任而感到没有自信。有时这一举作基于应用程序发现
    的一些情况，但更多的时候基于用户问题。通常，在用户发起一个不可恢复或者结果将导致异</p>

<blockquote>
    539
</blockquote>
<p>常的命令后，就会启动一个确认对话框。</p>

<p>确认对话框把责任推卸给用户。用户信任应用程序的工作。这些工作不仅是应用程序应该 做的，而且要确保做对。恰当的解决方法是使动作易于恢复，以及提供足够的非模态反馈，确 保用户不致措手不及。</p>

<p>确认对话框显示了人类行为的一个有趣怪癖：它们只在意想不到的时候起作用。听起来可能 会不以为然，除非你把它们在具体的场景中体会。如果在常规的地方提供确认对话框，用户很快
    就会习以为常，看也不看就习惯性地打发它。因此关闭确认对话框和发起确认对话框一样会成为</p>

<p>例行公事。如果在某一时刻，一个真正意外的危险情况发生 个应该引起用户注意的情况一</p>

<p>一他会因为已经形成的习惯而不假思索地关闭确认对话框。就像寓言故事里大喊 “ 狼来了”的 男孩，当最后真正有危险的时候，确认对话框不能起作用，因为它在没有危险的时候被 “ 喊 ” 了太多次。</p>

<p>确认对话框通常只能在用户明确会单击 “ 否 ” 或 “ 取消 ” 按钮后才出现。当用户可能单击 “ 是 ” 或 “ 确定 ” 按钮时，永远不应该出现。从这个角度看，它们看上去相当没有意义，对吗？</p>

<p>如何消除确认对话框</p>

<p>有三个设计原则告诉我们该如何消除确认对话框。最好的方式是遵循简单的格言：做，不 要问。当你设计软件时，勇往直前地给它确信的力量（如第 2 章中讨论的那样，通过用户研究 来支持）。用户会敬佩它的简短和自信。</p>

<p height="0pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>

<p><img align="baseline" alt="" height="70" src="../Images/Image00073.jpg" width="55"/></p>

<p>设计原则</p>

<p align="right" height="8pt" width="0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    做，不要问。</p>

<p><br/>
    <br/></p>

<p>当然，如果应用程序自信地做了用户不乐意的事，必须有能力执行撤销操作。应用程序执 行的每个行为都必须是可撤销的。在某些罕见的情况下，当应用程序行为不合时宜时，让用户 发起停止并撤销（ stop-and-imdo)
    的命令，取代预先用确认对话框提问的方式。</p>

<p>我们当前认为的不能用撤销保护的大部分情况，实际上可以保护得相当好。删除或覆盖文 件就是个很好的例子。文件可以移动到临时的目录，在那里保留一个月或者保留到你真正物理 删除之前。 Windows
    的回收站就釆用了这种策略，一个月后自动清除被删除的文件，期间用户 仍然可以手工清除垃圾。</p>

<blockquote>
    让所有的动作都可以撤销。
</blockquote>
<p>540</p>

<p align="right" height="0pt" width="0pt">第 21 章设计细节：控件和对话框</p>

<p>比草率地迫使用户使用撤销来挽救操作的更好方法是，应用程序首先要确保为用户提供了 足够的信息，以致它不会故意发起导致不恰当动作的命令（或者从来不忽略一个必要的命令）。
    应用程序应该用丰富的视觉反馈让用户不断获得信息，就像仪表板上的仪器告诉我们汽车的状</p>

<p>态一样。</p>

<p>撤销偶尔也无法真正起到保护的作用。这是不是使用确认对话框的合理场合？不一定是。 这里有更好的方法，即为用户提供类似高速公路的保护方式：用一致而清晰的标志。你可以在 界面上建立清晰的非模态警示标志。图 21-39 中的 Adobe
    Photoshop 的对话框，告诉我们文档比 可用的打印区域大。为什么应用软件要等到现在才告诉我们这个事实呢？如果在页面上显示真 实可打印区域的向导任何时候都可以看得到（除非用户把它们藏了起来），那又会怎样呢？如果
    当用户的鼠标滑过工具栏上的打印按钮时，将那些可打印区域以外部分的图片突出显示，那又 会怎样呢？清晰丰富的非模态反馈（见第 15 章）是解决这些问题的最好方式。</p>

<blockquote>
    <font size="2"><i>±</i></font> Adobe Photoshop
</blockquote>
<blockquote>
    <font size="2">丨</font> <font size="2">阁片超出了纸张打印的范围，图片</font>
</blockquote>
<blockquote>
    <font size="2">将被剪切掉一些。</font>
</blockquote>
<blockquote>
    <font size="2">现在</font> <font size="2"><u>以后</u></font>
</blockquote>
<blockquote>
    <img align="baseline" alt="" height="68" src="../Images/Image00128.jpg" width="54"/>
</blockquote>
<blockquote>
    <font size="2">图</font> 21-39 <font size="2">这个对话框几乎没有提供什么帮助，也太迟了。应用软件完成可以在主界面中用虚线向导直接显示可打印区
    域。没有理由让用户忍受这样的对话框。</font>
</blockquote>
<p>设计原则</p>

<p>给用户提供非模态反馈，避免用户犯错。</p>

<p>无法撤销的动作不算常见，更常见的情况：可以撤销，但常规确认对话框不能保护的动作。 图 21-38 中的确认对话框是极好的例子。没有任何理由要确认文件到回收站的移动。回收站存 在的唯一理由，就是实现文件删除的撤销工具。</p>

<p><span id="filepos0002897128"></span></p>

<p><font size="6">魔鬼在细有里</font></p>

<p>尽管本书中描述的设计原则，非常有助于创建令用户满意和满足的产品，但我们还是要始 终牢记 “ 魔鬼在细节里 ” 这句话。</p>

<blockquote>
    541<br/>
    <br/>
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p>即使产品整体概念是优秀的，令人沮丧的控件或不该出现的对话框，还是会导致低级烦恼 的经常发生。一定要小心谨慎，注意点点滴滴的每一处细节，确保产品在细节上的交互同样能 够帮助用户达成目标、完成任务、实现愿望。</p>

<p>从整体框架设计到每一处细节设计，如果你都能够遵守目标导向设计方法，运用它的思想， 那么你就一定能创造出超越对手的产品，吸引大批如虔诚信徒一样的用户，并且，或许会让这 个世界变得更美好一些，哪怕一次只是改善一个像素。</p>

<p>542<br/>
    <br/></p>

<p>附录 <font size="7">A</font></p>

<p align="right" height="2pt" width="0pt"><font size="7">设计原则</font></p>

<p><font size="6">第</font> <font size="7">1</font> <font size="6">章</font></p>

<blockquote>
    * 用户界面应该基于用户心理模型，而不是实现模型。
</blockquote>
<blockquote>
    • 目标导向的交互设计反映了用户的心理模型。
</blockquote>
<blockquote>
    * 交互设计不是凭空猜测。
</blockquote>
<p><font size="6">第</font> <font size="7">3</font> <font size="6">章</font></p>

<blockquote>
    ♦ 不要让用户感觉自己愚笨。
</blockquote>
<blockquote>
    • 界面设计的关注点在于单个主要人物模型。
</blockquote>
<p><font size="6">第</font> <font size="7">4</font> <font size="6">章</font></p>

<blockquote>
    • 设计产品行为前，首先定义产品会做什么。
</blockquote>
<blockquote>
    * 设计的早期阶段，假定界面是魔法。
</blockquote>
<p><font size="6">第</font> <font size="7">5</font> <font size="6">章</font></p>

<blockquote>
    • 绝对不要向涉众展现你不满意的设计方案，那可能正是他们喜欢的。 鲁用户体验只有一个，即形式和行为的设计必须相互和谐。
</blockquote>
<blockquote>
    543
</blockquote>
<p>About Face 4 :交互设计精髓</p>

<p><font size="6">第</font> <font size="7">8</font> <font size="6">章</font></p>

<blockquote>
    鲁人来思考，计算机干活。
</blockquote>
<blockquote>
    • 软件应该像人一样体贴。
</blockquote>
<blockquote>
    ♦ 如果用户愿意操作，就值得程序记住。
</blockquote>
<p><font size="6">第</font> <font size="7">9</font> <font size="6">章</font></p>

<blockquote>
    * 技术平台相关的决定最好能融入交互设计的成果。
</blockquote>
<blockquote>
    * 全屏幕使用独占应用程序，让它发挥最优效果。
</blockquote>
<blockquote>
    • 独占界面应该采用保守的视觉风格。
</blockquote>
<blockquote>
    • 独占式应用程序可以使用丰富的输入方式。
</blockquote>
<blockquote>
    * 在独占应用程序中让文档视图最大化。
</blockquote>
<blockquote>
    ♦ 暂时应用程序必须简单、清晰并且意思明确。
</blockquote>
<blockquote>
    * 暂时式应用程序只使用一个窗口和视图。
</blockquote>
<blockquote>
    • 启动暂时式应用时，它应该处于上一次的位置和配置状态下。 * 信息亭应该针对首次使用者进行优化。
</blockquote>
<p><font size="6">第</font> <font size="7">10</font> <font size="6">章</font></p>

<blockquote>
    • 不要将培训工具固定化。
</blockquote>
<blockquote>
    • 没有人愿意永远当个新手。
</blockquote>
<blockquote>
    * 为中级用户而优化设计。
</blockquote>
<blockquote>
    • 为常见的导航调整界面。
</blockquote>
<blockquote>
    * 用户只有获得充分的回报，才会付出相应的努力。
</blockquote>
<blockquote>
    * 将用户想象成为非常聪明但很忙碌的人。
</blockquote>
<p><font size="6">第</font> <font size="7">11</font> <font size="6">章</font></p>

<blockquote>
    • 不论界面多酷，越少越好。
</blockquote>
<blockquote>
    修不要用对话框报告。
</blockquote>
<blockquote>
    籲请求原谅，而不是许可。
</blockquote>
<p>附录 A 设计原则</p>

<p><font size="6">第</font> <font size="7">12</font> <font size="6">章</font></p>

<blockquote>
    籲尽可能地消除每一种练习。
</blockquote>
<blockquote>
    • 不要愚蠢地打断进程。
</blockquote>
<blockquote>
    籲不要让用户请求许可。
</blockquote>
<blockquote>
    參任何输出之处应允许输入。
</blockquote>
<blockquote>
    * 重大改变必须显著优秀。
</blockquote>
<p><font size="6">第</font> <font size="7">13</font> <font size="6">章</font></p>

<blockquote>
    • 多数人并不想知道得太多，只想成功地使用产品。
</blockquote>
<blockquote>
    鲁不要让界面强行适应隐喻。
</blockquote>
<blockquote>
    • 所有的习惯用法都需要学习，而好的习惯用法只需学习一次。 • 丰富的视觉反馈是成功的直接操作的关键。
</blockquote>
<blockquote>
    * 尽可能用视觉表达顺从。
</blockquote>
<p><font size="6">第</font> <font size="7">14</font> <font size="6">章</font></p>

<blockquote>
    • 出错可能不是程序的问题，但是程序的责任。
</blockquote>
<blockquote>
    * 审核，不要编辑。
</blockquote>
<blockquote>
    • 自动保存文档和设置。
</blockquote>
<blockquote>
    • 把文件放在用户能找到的地方。
</blockquote>
<p><font size="6">第</font> <font size="7">16</font> <font size="6">章</font></p>

<blockquote>
    春给用户提供一个现成模板库。
</blockquote>
<p><font size="6">第</font> <font size="7">17</font> <font size="6">章</font></p>

<blockquote>
    • 表明这是什么用视觉；明确这是哪一个用文字。
</blockquote>
<p>545</p>

<p>About Face 4 :交互设计精髓</p>

<blockquote>
    * 行为不同的元素要在视觉设计上明显区分。
</blockquote>
<blockquote>
    鲁从视觉上传达功能和行为。
</blockquote>
<blockquote>
    • 删减东西，直到破坏了设计为止，再把最后去掉的东西加上。
</blockquote>
<blockquote>
    * 遵守标准，除非有极好的其他选择。
</blockquote>
<blockquote>
    • 一致不意味着僵化。
</blockquote>
<p><font size="6">第</font> <font size="7">18</font> <font size="6">章</font></p>

<blockquote>
    • 无论是运用哪种交互习惯用法，都要考虑实际运用场景的客观情况。 鲁对话框是一个房间，去之前要有个好理由。
</blockquote>
<blockquote>
    鲁将功能置于需要它们的窗口中。
</blockquote>
<blockquote>
    ♦ 用菜单来提供一条学习的途径。
</blockquote>
<blockquote>
    • 禁用掉不适用的菜单项。
</blockquote>
<blockquote>
    ♦ 相同的命令要使用相同的视觉符号。
</blockquote>
<blockquote>
    隹工具栏为有经验的用户提供快速访问常用功能的途径。
</blockquote>
<blockquote>
    * 所有工具栏和图标控件都应该使用工具提示。
</blockquote>
<blockquote>
    鲁浏览和选择任务要同时提供鼠标和键盘支持。
</blockquote>
<blockquote>
    • 用光标形状变化表明元键的用法。
</blockquote>
<blockquote>
    ♦ 单击意味选择数据或对象，或改变控件状态。
</blockquote>
<blockquote>
    ♦ 双击意味着单击再加上动作。
</blockquote>
<blockquote>
    鲁在对象或者数据上按下鼠标意味着选择。
</blockquote>
<blockquote>
    ♦ 在控件上鼠标按下意味着预备动作；鼠标释放意味着执行动作。 鲁要让选中这种状态，在视觉上明确而醒目。
</blockquote>
<blockquote>
    • 拖放候选对象必须在视觉上表明它们的接受能力。
</blockquote>
<blockquote>
    修拖动光标必须在视觉上表明源对象。
</blockquote>
<blockquote>
    ♦ 任何可滚动的拖放目标对象都必须支持自动滚屏。
</blockquote>
<blockquote>
    ♦ 所有拖动都要去颤动。
</blockquote>
<blockquote>
    * 任何要求精确对齐的程序必须提供精确滚动的游标工具。
</blockquote>
<p><font size="6">第</font> <font size="7">19</font> <font size="6">章</font></p>

<blockquote>
    • 大多数移动应用是暂态的。
</blockquote>
</blockquote>
</body>
</html>
